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

package/build/controls/LottieLoopButton.js

@@ -0,0 +1,31 @@
+import { useLottieInstance } from "../animation/useLottieInstance.js";
+import { controlIcon } from "./controlIcon.js";
+import { jsx } from "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 = useLottieInstance(lottie).loop !== false;
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": "Loop",
+		title: "Loop",
+		...rest,
+		"aria-pressed": looping,
+		className: className ? `${lottieLoopClass} ${className}` : lottieLoopClass,
+		onClick: toggle,
+		type: "button",
+		children: controlIcon(loopPath)
+	});
+}
+//#endregion
+export { LottieLoopButton, lottieLoopClass };

package/build/controls/LottiePlayButton.cjs

@@ -0,0 +1,34 @@
+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/LottiePlayButton.tsx
+/** The class this control carries, which the bar's stylesheet targets. */
+const lottiePlayClass = "lottie-play";
+const playPath = "M8 5v14l11-7z";
+const pausePath = "M6 5h4v14H6zm8 0h4v14h-4z";
+/**
+* Starts the animation, or stops it where it is.
+*
+* One button rather than two, so that pressing it does not unmount the element
+* that has focus. The player this replaces rendered play and pause as separate
+* components in separate positions, which dropped focus to the document body
+* every time someone pressed either with the keyboard.
+*/
+function LottiePlayButton({ lottie, className, ...rest }) {
+	const instance = require_useLottieInstance.useLottieInstance(lottie);
+	const playing = instance.state === require_types.LottieState.playing;
+	const label = playing ? "Pause" : "Play";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"aria-label": label,
+		title: label,
+		...rest,
+		className: className ? `${lottiePlayClass} ${className}` : lottiePlayClass,
+		onClick: playing ? instance.pause : instance.play,
+		type: "button",
+		children: require_controlIcon.controlIcon(playing ? pausePath : playPath)
+	});
+}
+//#endregion
+exports.LottiePlayButton = LottiePlayButton;
+exports.lottiePlayClass = lottiePlayClass;

package/build/controls/LottiePlayButton.js

@@ -0,0 +1,33 @@
+import { useLottieInstance } from "../animation/useLottieInstance.js";
+import { LottieState } from "../animation/types.js";
+import { controlIcon } from "./controlIcon.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/controls/LottiePlayButton.tsx
+/** The class this control carries, which the bar's stylesheet targets. */
+const lottiePlayClass = "lottie-play";
+const playPath = "M8 5v14l11-7z";
+const pausePath = "M6 5h4v14H6zm8 0h4v14h-4z";
+/**
+* Starts the animation, or stops it where it is.
+*
+* One button rather than two, so that pressing it does not unmount the element
+* that has focus. The player this replaces rendered play and pause as separate
+* components in separate positions, which dropped focus to the document body
+* every time someone pressed either with the keyboard.
+*/
+function LottiePlayButton({ lottie, className, ...rest }) {
+	const instance = useLottieInstance(lottie);
+	const playing = instance.state === LottieState.playing;
+	const label = playing ? "Pause" : "Play";
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": label,
+		title: label,
+		...rest,
+		className: className ? `${lottiePlayClass} ${className}` : lottiePlayClass,
+		onClick: playing ? instance.pause : instance.play,
+		type: "button",
+		children: controlIcon(playing ? pausePath : playPath)
+	});
+}
+//#endregion
+export { LottiePlayButton, lottiePlayClass };

package/build/controls/LottieReadout.cjs

@@ -0,0 +1,61 @@
+const require_useLottieInstance = require("../animation/useLottieInstance.cjs");
+const require_types = require("../animation/types.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/controls/LottieReadout.tsx
+/** The class this control carries, which the bar's stylesheet targets. */
+const lottieReadoutClass = "lottie-readout";
+/**
+* One position, in whichever unit was asked for.
+*
+* Seconds carry one decimal rather than the `0:04` a video player would use.
+* Most animations are a few seconds long, so minutes are always zero and the
+* seconds place is the only one doing any work, which makes dragging look like
+* it is doing nothing.
+*/
+function format(frames, secondsPerFrame, unit) {
+	return unit === "seconds" ? `${(frames * secondsPerFrame).toFixed(1)}s` : String(Math.round(frames));
+}
+/**
+* Where the playhead is, and how far it has to go.
+*
+* Both numbers describe what is currently playable rather than the whole file,
+* so a segment moves them together. With nothing loaded they are zeros, which
+* keeps the element the same shape it will be a moment later.
+*
+* Like the seek bar, the moving half is written straight onto the element rather
+* than held in state, because it changes on every rendered frame.
+*/
+function LottieReadout({ lottie, unit = "frames", className, ...rest }) {
+	const { subscribe, playableFrames, playableDuration, animationItem } = require_useLottieInstance.useLottieInstance(lottie);
+	const element = (0, react.useRef)(null);
+	const secondsPerFrame = playableFrames === 0 ? 0 : playableDuration / playableFrames;
+	(0, react.useEffect)(() => {
+		const write = (frame) => {
+			const node = element.current;
+			if (node !== null) node.textContent = format(frame, secondsPerFrame, unit);
+		};
+		write(animationItem === null ? 0 : animationItem.currentFrame);
+		return subscribe(require_types.LottieSubscription.frame, ({ currentFrame }) => {
+			write(currentFrame);
+		});
+	}, [
+		subscribe,
+		animationItem,
+		secondsPerFrame,
+		unit
+	]);
+	const total = format(Math.max(playableFrames - 1, 0), secondsPerFrame, unit);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("output", {
+		...rest,
+		className: className ? `${lottieReadoutClass} ${className}` : lottieReadoutClass,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			ref: element,
+			style: { minWidth: `${String(total.length)}ch` },
+			children: format(0, secondsPerFrame, unit)
+		}), ` / ${total}`]
+	});
+}
+//#endregion
+exports.LottieReadout = LottieReadout;
+exports.lottieReadoutClass = lottieReadoutClass;

package/build/controls/LottieReadout.d.cts

@@ -0,0 +1,13 @@
+import "../animation/types.cjs";
+//#region src/controls/LottieReadout.d.ts
+/**
+ * What the position is counted in.
+ *
+ * A plain union rather than an object map, unlike the library's public
+ * vocabulary, because nothing reads it at runtime: it is only ever written as a
+ * literal at a call site, so a runtime object would ship to every consumer of
+ * the bar in order to serve nobody.
+ */
+type LottieReadoutUnit = "frames" | "seconds";
+//#endregion
+export { LottieReadoutUnit };

package/build/controls/LottieReadout.d.ts

@@ -0,0 +1,13 @@
+import "../animation/types.js";
+//#region src/controls/LottieReadout.d.ts
+/**
+ * What the position is counted in.
+ *
+ * A plain union rather than an object map, unlike the library's public
+ * vocabulary, because nothing reads it at runtime: it is only ever written as a
+ * literal at a call site, so a runtime object would ship to every consumer of
+ * the bar in order to serve nobody.
+ */
+type LottieReadoutUnit = "frames" | "seconds";
+//#endregion
+export { LottieReadoutUnit };

package/build/controls/LottieReadout.js

@@ -0,0 +1,60 @@
+import { useLottieInstance } from "../animation/useLottieInstance.js";
+import { LottieSubscription } from "../animation/types.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/controls/LottieReadout.tsx
+/** The class this control carries, which the bar's stylesheet targets. */
+const lottieReadoutClass = "lottie-readout";
+/**
+* One position, in whichever unit was asked for.
+*
+* Seconds carry one decimal rather than the `0:04` a video player would use.
+* Most animations are a few seconds long, so minutes are always zero and the
+* seconds place is the only one doing any work, which makes dragging look like
+* it is doing nothing.
+*/
+function format(frames, secondsPerFrame, unit) {
+	return unit === "seconds" ? `${(frames * secondsPerFrame).toFixed(1)}s` : String(Math.round(frames));
+}
+/**
+* Where the playhead is, and how far it has to go.
+*
+* Both numbers describe what is currently playable rather than the whole file,
+* so a segment moves them together. With nothing loaded they are zeros, which
+* keeps the element the same shape it will be a moment later.
+*
+* Like the seek bar, the moving half is written straight onto the element rather
+* than held in state, because it changes on every rendered frame.
+*/
+function LottieReadout({ lottie, unit = "frames", className, ...rest }) {
+	const { subscribe, playableFrames, playableDuration, animationItem } = useLottieInstance(lottie);
+	const element = useRef(null);
+	const secondsPerFrame = playableFrames === 0 ? 0 : playableDuration / playableFrames;
+	useEffect(() => {
+		const write = (frame) => {
+			const node = element.current;
+			if (node !== null) node.textContent = format(frame, secondsPerFrame, unit);
+		};
+		write(animationItem === null ? 0 : animationItem.currentFrame);
+		return subscribe(LottieSubscription.frame, ({ currentFrame }) => {
+			write(currentFrame);
+		});
+	}, [
+		subscribe,
+		animationItem,
+		secondsPerFrame,
+		unit
+	]);
+	const total = format(Math.max(playableFrames - 1, 0), secondsPerFrame, unit);
+	return /* @__PURE__ */ jsxs("output", {
+		...rest,
+		className: className ? `${lottieReadoutClass} ${className}` : lottieReadoutClass,
+		children: [/* @__PURE__ */ jsx("span", {
+			ref: element,
+			style: { minWidth: `${String(total.length)}ch` },
+			children: format(0, secondsPerFrame, unit)
+		}), ` / ${total}`]
+	});
+}
+//#endregion
+export { LottieReadout, lottieReadoutClass };

package/build/controls/LottieSeekBar.cjs

@@ -0,0 +1,87 @@
+const require_useLottieInstance = require("../animation/useLottieInstance.cjs");
+const require_types = require("../animation/types.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/controls/LottieSeekBar.tsx
+/** The class this control carries, which the bar's stylesheet targets. */
+const lottieSeekClass = "lottie-seek";
+/**
+* Shows where the playhead is, and moves it.
+*
+* A native range input, so the browser turns a frame number into a position on
+* the track and nothing here computes geometry. That also means the element
+* reports its own value to assistive technology, which is why no `aria-valuenow`
+* is written: one hardcoded here is exactly the defect the old player shipped,
+* where a screen reader was told the position was zero forever.
+*
+* The position is written straight onto the element rather than held in state,
+* because it changes on every rendered frame and this component would otherwise
+* re-render sixty times a second on top of the animation's own work. The input
+* is uncontrolled, which is what stops React putting its own value back.
+*/
+function LottieSeekBar({ lottie, className, ...rest }) {
+	const instance = require_useLottieInstance.useLottieInstance(lottie);
+	const { subscribe, playableFrames, animationItem } = instance;
+	const element = (0, react.useRef)(null);
+	const dragging = (0, react.useRef)(false);
+	const stopWatching = (0, react.useRef)(() => void 0);
+	(0, react.useEffect)(() => () => {
+		stopWatching.current();
+	}, []);
+	(0, react.useEffect)(() => {
+		const write = (frame) => {
+			const node = element.current;
+			if (node !== null && !dragging.current) node.value = String(frame);
+		};
+		write(animationItem === null ? 0 : animationItem.currentFrame);
+		return subscribe(require_types.LottieSubscription.frame, ({ currentFrame }) => {
+			write(currentFrame);
+		});
+	}, [subscribe, animationItem]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		"aria-label": "Seek",
+		title: "Seek",
+		...rest,
+		className: className ? `${lottieSeekClass} ${className}` : lottieSeekClass,
+		defaultValue: 0,
+		max: Math.max(playableFrames - 1, 0),
+		min: 0,
+		onChange: (event) => {
+			const frame = Number(event.target.value);
+			if (dragging.current) instance.scrubTo(frame);
+			else instance.seek(frame);
+		},
+		onKeyDown: (event) => {
+			const forward = event.key === "ArrowRight" || event.key === "ArrowUp";
+			const back = event.key === "ArrowLeft" || event.key === "ArrowDown";
+			if (!forward && !back) return;
+			event.preventDefault();
+			instance.pause();
+			const node = element.current;
+			const from = node === null ? 0 : Number(node.value);
+			instance.seek(forward ? Math.floor(from) + 1 : Math.ceil(from) - 1);
+		},
+		onPointerDown: () => {
+			dragging.current = true;
+			instance.scrubStart();
+			const end = () => {
+				stopWatching.current();
+				dragging.current = false;
+				instance.scrubEnd();
+			};
+			stopWatching.current = () => {
+				stopWatching.current = () => void 0;
+				window.removeEventListener("pointerup", end);
+				window.removeEventListener("pointercancel", end);
+			};
+			window.addEventListener("pointerup", end);
+			window.addEventListener("pointercancel", end);
+		},
+		ref: element,
+		step: "any",
+		type: "range"
+	});
+}
+//#endregion
+exports.LottieSeekBar = LottieSeekBar;
+exports.lottieSeekClass = lottieSeekClass;

package/build/controls/LottieSeekBar.js

@@ -0,0 +1,86 @@
+import { useLottieInstance } from "../animation/useLottieInstance.js";
+import { LottieSubscription } from "../animation/types.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/controls/LottieSeekBar.tsx
+/** The class this control carries, which the bar's stylesheet targets. */
+const lottieSeekClass = "lottie-seek";
+/**
+* Shows where the playhead is, and moves it.
+*
+* A native range input, so the browser turns a frame number into a position on
+* the track and nothing here computes geometry. That also means the element
+* reports its own value to assistive technology, which is why no `aria-valuenow`
+* is written: one hardcoded here is exactly the defect the old player shipped,
+* where a screen reader was told the position was zero forever.
+*
+* The position is written straight onto the element rather than held in state,
+* because it changes on every rendered frame and this component would otherwise
+* re-render sixty times a second on top of the animation's own work. The input
+* is uncontrolled, which is what stops React putting its own value back.
+*/
+function LottieSeekBar({ lottie, className, ...rest }) {
+	const instance = useLottieInstance(lottie);
+	const { subscribe, playableFrames, animationItem } = instance;
+	const element = useRef(null);
+	const dragging = useRef(false);
+	const stopWatching = useRef(() => void 0);
+	useEffect(() => () => {
+		stopWatching.current();
+	}, []);
+	useEffect(() => {
+		const write = (frame) => {
+			const node = element.current;
+			if (node !== null && !dragging.current) node.value = String(frame);
+		};
+		write(animationItem === null ? 0 : animationItem.currentFrame);
+		return subscribe(LottieSubscription.frame, ({ currentFrame }) => {
+			write(currentFrame);
+		});
+	}, [subscribe, animationItem]);
+	return /* @__PURE__ */ jsx("input", {
+		"aria-label": "Seek",
+		title: "Seek",
+		...rest,
+		className: className ? `${lottieSeekClass} ${className}` : lottieSeekClass,
+		defaultValue: 0,
+		max: Math.max(playableFrames - 1, 0),
+		min: 0,
+		onChange: (event) => {
+			const frame = Number(event.target.value);
+			if (dragging.current) instance.scrubTo(frame);
+			else instance.seek(frame);
+		},
+		onKeyDown: (event) => {
+			const forward = event.key === "ArrowRight" || event.key === "ArrowUp";
+			const back = event.key === "ArrowLeft" || event.key === "ArrowDown";
+			if (!forward && !back) return;
+			event.preventDefault();
+			instance.pause();
+			const node = element.current;
+			const from = node === null ? 0 : Number(node.value);
+			instance.seek(forward ? Math.floor(from) + 1 : Math.ceil(from) - 1);
+		},
+		onPointerDown: () => {
+			dragging.current = true;
+			instance.scrubStart();
+			const end = () => {
+				stopWatching.current();
+				dragging.current = false;
+				instance.scrubEnd();
+			};
+			stopWatching.current = () => {
+				stopWatching.current = () => void 0;
+				window.removeEventListener("pointerup", end);
+				window.removeEventListener("pointercancel", end);
+			};
+			window.addEventListener("pointerup", end);
+			window.addEventListener("pointercancel", end);
+		},
+		ref: element,
+		step: "any",
+		type: "range"
+	});
+}
+//#endregion
+export { LottieSeekBar, lottieSeekClass };

package/build/controls/LottieSpeedSelect.cjs

@@ -0,0 +1,51 @@
+const require_useLottieInstance = require("../animation/useLottieInstance.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/controls/LottieSpeedSelect.tsx
+/** The class this control carries, which the bar's stylesheet targets. */
+const lottieSpeedClass = "lottie-speed";
+/** The rates offered, slow ones included because inspecting a file needs them. */
+const rates = [
+	.25,
+	.5,
+	.75,
+	1,
+	1.25,
+	1.5,
+	2
+];
+/**
+* Chooses how fast the animation plays.
+*
+* A native `<select>`, which is what makes this control affordable at all. The
+* player this replaces built a custom dropdown whose options stayed in the
+* document when it was closed, so every animation on a page added seven
+* invisible tab stops, and it carried none of the menu semantics that would have
+* made a custom one usable. The native element has one tab stop and needs no
+* semantics of ours.
+*
+* A rate set from somewhere else, a prop or `setSpeed`, is added to the list
+* rather than ignored, so the control never sits blank or reports a rate the
+* animation is not playing at.
+*/
+function LottieSpeedSelect({ lottie, className, ...rest }) {
+	const instance = require_useLottieInstance.useLottieInstance(lottie);
+	const { speed } = instance;
+	const offered = rates.includes(speed) ? rates : [...rates, speed].sort((first, second) => first - second);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+		"aria-label": "Playback speed",
+		title: "Playback speed",
+		...rest,
+		className: className ? `${lottieSpeedClass} ${className}` : lottieSpeedClass,
+		onChange: (event) => {
+			instance.setSpeed(Number(event.target.value));
+		},
+		value: String(speed),
+		children: offered.map((rate) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("option", {
+			value: String(rate),
+			children: [rate, "x"]
+		}, rate))
+	});
+}
+//#endregion
+exports.LottieSpeedSelect = LottieSpeedSelect;
+exports.lottieSpeedClass = lottieSpeedClass;

package/build/controls/LottieSpeedSelect.js

@@ -0,0 +1,50 @@
+import { useLottieInstance } from "../animation/useLottieInstance.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/controls/LottieSpeedSelect.tsx
+/** The class this control carries, which the bar's stylesheet targets. */
+const lottieSpeedClass = "lottie-speed";
+/** The rates offered, slow ones included because inspecting a file needs them. */
+const rates = [
+	.25,
+	.5,
+	.75,
+	1,
+	1.25,
+	1.5,
+	2
+];
+/**
+* Chooses how fast the animation plays.
+*
+* A native `<select>`, which is what makes this control affordable at all. The
+* player this replaces built a custom dropdown whose options stayed in the
+* document when it was closed, so every animation on a page added seven
+* invisible tab stops, and it carried none of the menu semantics that would have
+* made a custom one usable. The native element has one tab stop and needs no
+* semantics of ours.
+*
+* A rate set from somewhere else, a prop or `setSpeed`, is added to the list
+* rather than ignored, so the control never sits blank or reports a rate the
+* animation is not playing at.
+*/
+function LottieSpeedSelect({ lottie, className, ...rest }) {
+	const instance = useLottieInstance(lottie);
+	const { speed } = instance;
+	const offered = rates.includes(speed) ? rates : [...rates, speed].sort((first, second) => first - second);
+	return /* @__PURE__ */ jsx("select", {
+		"aria-label": "Playback speed",
+		title: "Playback speed",
+		...rest,
+		className: className ? `${lottieSpeedClass} ${className}` : lottieSpeedClass,
+		onChange: (event) => {
+			instance.setSpeed(Number(event.target.value));
+		},
+		value: String(speed),
+		children: offered.map((rate) => /* @__PURE__ */ jsxs("option", {
+			value: String(rate),
+			children: [rate, "x"]
+		}, rate))
+	});
+}
+//#endregion
+export { LottieSpeedSelect, lottieSpeedClass };

package/build/controls/LottieStopButton.cjs

@@ -0,0 +1,29 @@
+const require_useLottieInstance = require("../animation/useLottieInstance.cjs");
+const require_controlIcon = require("./controlIcon.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/controls/LottieStopButton.tsx
+/** The class this control carries, which the bar's stylesheet targets. */
+const lottieStopClass = "lottie-stop";
+const stopPath = "M6 6h12v12H6z";
+/**
+* Stops the animation and returns it to the first frame of what is playable.
+*
+* Distinct from pausing, which leaves the playhead where it is. Both exist
+* because this control set is for inspecting a file, where returning to a known
+* position is something you do constantly.
+*/
+function LottieStopButton({ lottie, className, ...rest }) {
+	const instance = require_useLottieInstance.useLottieInstance(lottie);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		"aria-label": "Stop",
+		title: "Stop",
+		...rest,
+		className: className ? `${lottieStopClass} ${className}` : lottieStopClass,
+		onClick: instance.stop,
+		type: "button",
+		children: require_controlIcon.controlIcon(stopPath)
+	});
+}
+//#endregion
+exports.LottieStopButton = LottieStopButton;
+exports.lottieStopClass = lottieStopClass;

package/build/controls/LottieStopButton.js

@@ -0,0 +1,28 @@
+import { useLottieInstance } from "../animation/useLottieInstance.js";
+import { controlIcon } from "./controlIcon.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/controls/LottieStopButton.tsx
+/** The class this control carries, which the bar's stylesheet targets. */
+const lottieStopClass = "lottie-stop";
+const stopPath = "M6 6h12v12H6z";
+/**
+* Stops the animation and returns it to the first frame of what is playable.
+*
+* Distinct from pausing, which leaves the playhead where it is. Both exist
+* because this control set is for inspecting a file, where returning to a known
+* position is something you do constantly.
+*/
+function LottieStopButton({ lottie, className, ...rest }) {
+	const instance = useLottieInstance(lottie);
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": "Stop",
+		title: "Stop",
+		...rest,
+		className: className ? `${lottieStopClass} ${className}` : lottieStopClass,
+		onClick: instance.stop,
+		type: "button",
+		children: controlIcon(stopPath)
+	});
+}
+//#endregion
+export { LottieStopButton, lottieStopClass };

package/build/controls/controlIcon.cjs

@@ -0,0 +1,25 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/controls/controlIcon.tsx
+/**
+* One control's icon, drawn from a single path on a 24 unit grid.
+*
+* Every icon in the bar is one shape, filled in `currentColor` so it takes the
+* button's own colour, and hidden from assistive technology because the button
+* already carries a label. Sharing the wrapper rather than repeating it is worth
+* doing here: in the player this replaces, the identical `<svg>` opening tag was
+* about two thirds of every icon's source.
+*
+* A function rather than a component, because nothing needs it to be one: it has
+* no state, takes no children, and adding a component boundary would put a node
+* in the tree for React to reconcile on every render of the bar.
+*/
+function controlIcon(path) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: path })
+	});
+}
+//#endregion
+exports.controlIcon = controlIcon;

package/build/controls/controlIcon.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/controls/controlIcon.tsx
+/**
+* One control's icon, drawn from a single path on a 24 unit grid.
+*
+* Every icon in the bar is one shape, filled in `currentColor` so it takes the
+* button's own colour, and hidden from assistive technology because the button
+* already carries a label. Sharing the wrapper rather than repeating it is worth
+* doing here: in the player this replaces, the identical `<svg>` opening tag was
+* about two thirds of every icon's source.
+*
+* A function rather than a component, because nothing needs it to be one: it has
+* no state, takes no children, and adding a component boundary would put a node
+* in the tree for React to reconcile on every render of the bar.
+*/
+function controlIcon(path) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: path })
+	});
+}
+//#endregion
+export { controlIcon };