waveframe 0.1.2 → 0.2.0

package/dist/waveframe.es.js

@@ -1,51 +1,224 @@
-import e, { memo as t, useCallback as n, useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { memo as e, useEffect as t, useMemo as n, useRef as r, useState as i, useSyncExternalStore as a } from "react";
 //#region \0rolldown/runtime.js
-var s = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), c = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+var o = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), s = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
 	if (typeof require < "u") return require.apply(this, arguments);
 	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-}), l = (e) => {
-	let t = a(null), [i, s] = o(!1), [c, l] = o(0), [u, d] = o(0);
-	r(() => {
-		t.current && t.current.readyState >= 1 && d(t.current.duration);
-	}, [e]);
-	let f = n((e) => {
-		e?.stopPropagation(), t.current && (i ? t.current.pause() : t.current.play().catch(console.error));
-	}, [i]), p = n(() => {
-		t.current && l(t.current.currentTime);
-	}, []), m = n(() => {
-		t.current && d(t.current.duration);
-	}, []);
-	return {
-		isPlaying: i,
-		currentTime: c,
-		duration: u,
-		togglePlay: f,
-		seek: n((e) => {
-			t.current && u && (t.current.currentTime = e * u);
-		}, [u]),
-		audioProps: {
-			ref: t,
-			src: e,
-			onTimeUpdate: p,
-			onLoadedMetadata: m,
-			onPlay: () => s(!0),
-			onPause: () => s(!1),
-			onEnded: () => s(!1)
+}), c = class {
+	audio;
+	listeners = /* @__PURE__ */ new Set();
+	_state;
+	constructor() {
+		this.audio = new Audio(), this._state = {
+			isPlaying: !1,
+			currentTime: 0,
+			duration: 0,
+			volume: 1,
+			muted: !1
+		}, this.initListeners();
+	}
+	initListeners() {
+		this.audio.addEventListener("play", () => this.updateState({ isPlaying: !0 })), this.audio.addEventListener("pause", () => this.updateState({ isPlaying: !1 })), this.audio.addEventListener("timeupdate", () => this.updateState({ currentTime: this.audio.currentTime })), this.audio.addEventListener("durationchange", () => this.updateState({ duration: this.audio.duration })), this.audio.addEventListener("volumechange", () => this.updateState({
+			volume: this.audio.volume,
+			muted: this.audio.muted
+		})), this.audio.addEventListener("ended", () => this.updateState({ isPlaying: !1 }));
+	}
+	updateState(e) {
+		this._state = {
+			...this._state,
+			...e
+		}, this.notify();
+	}
+	notify() {
+		this.listeners.forEach((e) => e(this._state));
+	}
+	subscribe(e) {
+		return this.listeners.add(e), () => this.listeners.delete(e);
+	}
+	get state() {
+		return this._state;
+	}
+	setSource(e) {
+		this.audio.src = e, this.audio.load();
+	}
+	play() {
+		return this.audio.play();
+	}
+	pause() {
+		this.audio.pause();
+	}
+	togglePlay() {
+		this._state.isPlaying ? this.pause() : this.play();
+	}
+	seek(e) {
+		this.audio.currentTime = e;
+	}
+	setVolume(e) {
+		this.audio.volume = e;
+	}
+	setMuted(e) {
+		this.audio.muted = e;
+	}
+	dispose() {
+		this.pause(), this.audio.src = "", this.listeners.clear();
+	}
+}, l = class {
+	audioCtx = null;
+	constructor() {}
+	getContext() {
+		return this.audioCtx ||= new (window.AudioContext || window.webkitAudioContext)(), this.audioCtx;
+	}
+	async generatePeaks(e, t = 512) {
+		try {
+			let n;
+			if (typeof e == "string") {
+				let t = await fetch(e);
+				if (!t.ok) throw Error(`Failed to fetch audio: ${t.statusText}`);
+				n = await t.arrayBuffer();
+			} else n = await e.arrayBuffer();
+			let r = (await this.getContext().decodeAudioData(n)).getChannelData(0), i = Math.floor(r.length / t), a = [];
+			for (let e = 0; e < t; e++) {
+				let t = 0, n = e * i, o = n + i;
+				for (let e = n; e < o; e++) {
+					let n = Math.abs(r[e]);
+					n > t && (t = n);
+				}
+				a.push(t);
+			}
+			let o = Math.max(...a);
+			return a.map((e) => e / (o || 1));
+		} catch (e) {
+			throw console.error("PeakAnalyzer Error:", e), e;
 		}
-	};
-}, u = async (e, t = 512) => {
-	let n = await (await fetch(e)).arrayBuffer(), r = (await new (window.AudioContext || window.webkitAudioContext)().decodeAudioData(n)).getChannelData(0), i = Math.floor(r.length / t), a = [];
-	for (let e = 0; e < t; e++) {
-		let t = 0, n = e * i, o = n + i;
-		for (let e = n; e < o; e++) {
-			let n = Math.abs(r[e]);
-			n > t && (t = n);
+	}
+	dispose() {
+		this.audioCtx &&= (this.audioCtx.close(), null);
+	}
+}, u = class {
+	player;
+	analyzer;
+	listeners = /* @__PURE__ */ new Set();
+	_state;
+	_media = null;
+	_objectUrl = null;
+	constructor() {
+		this.player = new c(), this.analyzer = new l(), this._state = {
+			...this.player.state,
+			peaks: [],
+			isAnalyzing: !1,
+			error: null
+		}, this.player.subscribe((e) => {
+			this.updateState({ ...e });
+		});
+	}
+	updateState(e) {
+		this._state = {
+			...this._state,
+			...e
+		}, this.notify();
+	}
+	notify() {
+		this.listeners.forEach((e) => e(this._state));
+	}
+	subscribe(e) {
+		return this.listeners.add(e), () => this.listeners.delete(e);
+	}
+	getSnapshot() {
+		return this._state;
+	}
+	revokeOldSource() {
+		this._objectUrl &&= (URL.revokeObjectURL(this._objectUrl), null);
+	}
+	load(e, t) {
+		if (this._media !== e) {
+			this.revokeOldSource(), this._media = e;
+			let n;
+			typeof e == "string" ? n = e : (this._objectUrl = URL.createObjectURL(e), n = this._objectUrl), this.player.setSource(n);
+			let r = t && t.length > 0;
+			this.updateState({
+				peaks: t || [],
+				isAnalyzing: !1,
+				error: null
+			}), r || this.analyze();
+		} else t && t !== this._state.peaks && this.updateState({ peaks: t });
+	}
+	async analyze(e = 512) {
+		if (!this._media) {
+			this.updateState({ error: "No media loaded to analyze" });
+			return;
 		}
-		a.push(t);
+		this.updateState({
+			isAnalyzing: !0,
+			error: null
+		});
+		try {
+			let t = await this.analyzer.generatePeaks(this._media, e);
+			this.updateState({
+				peaks: t,
+				isAnalyzing: !1
+			});
+		} catch (e) {
+			this.updateState({
+				isAnalyzing: !1,
+				error: e instanceof Error ? e.message : "Analysis failed"
+			});
+		}
+	}
+	togglePlay() {
+		this.player.togglePlay();
+	}
+	play() {
+		this.player.play();
+	}
+	pause() {
+		this.player.pause();
+	}
+	seek(e) {
+		let { duration: t } = this._state;
+		t && this.player.seek(e * t);
+	}
+	setVolume(e) {
+		this.player.setVolume(e);
+	}
+	setMuted(e) {
+		this.player.setMuted(e);
+	}
+	dispose() {
+		this.revokeOldSource(), this.player.dispose(), this.analyzer.dispose(), this.listeners.clear();
+	}
+}, d = (e) => a((t) => e.subscribe(t), () => e.getSnapshot()), f = (e, r = {}) => {
+	let { peaks: i, engine: a } = r, o = n(() => a || new u(), [a]), s = a || o, c = d(s);
+	return t(() => {
+		e && s.load(e, i);
+	}, [
+		s,
+		e,
+		i
+	]), t(() => () => {
+		a || o.dispose();
+	}, [o, a]), {
+		state: c,
+		engine: s,
+		togglePlay: () => s.togglePlay(),
+		play: () => s.play(),
+		pause: () => s.pause(),
+		seek: (e) => s.seek(e),
+		setVolume: (e) => s.setVolume(e),
+		setMuted: (e) => s.setMuted(e),
+		analyze: (e) => s.analyze(e)
+	};
+}, p = async (e, t = 512) => {
+	let n = new l();
+	try {
+		return await n.generatePeaks(e, t);
+	} finally {
+		n.dispose();
 	}
-	let o = Math.max(...a);
-	return a.map((e) => e / (o || 1));
-}, d = (e) => isNaN(e) ? "0:00" : `${Math.floor(e / 60)}:${Math.floor(e % 60).toString().padStart(2, "0")}`, f = (e, t) => {
+}, m = async (e) => {
+	let t = await (await fetch(e)).blob();
+	return URL.createObjectURL(t);
+}, h = (e) => {
+	e && e.startsWith("blob:") && URL.revokeObjectURL(e);
+}, g = (e) => isNaN(e) ? "0:00" : `${Math.floor(e / 60)}:${Math.floor(e % 60).toString().padStart(2, "0")}`, _ = (e, t) => {
 	if (e.length === 0) return [];
 	if (e.length === t) return e;
 	let n = Array(t), r = e.length / t;
@@ -59,16 +232,24 @@ var s = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		n[i] = e[a] + (e[o] - e[a]) * s;
 	}
 	return n;
-}, p = (e, t) => i(() => f(e, t), [e, t]), m = (e) => {
-	let [t, n] = o(0);
-	return r(() => {
+}, v = (e) => e.split("\n").map((e) => {
+	let t = e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), n = {}, r = 0, i = (e, t) => {
+		let i = `__TOKEN_${r++}__`;
+		return n[i] = `<span class="${t}">${e}</span>`, i;
+	};
+	return t = t.replace(/("(?:[^"\\]|\\.)*")/g, (e) => i(e, "text-[#ce9178]")), t = t.replace(/\b(\d+(\.\d+)?)\b/g, (e) => i(e, "text-[#b5cea8]")), t = t.replace(/\b(WaveframePlayer)\b/g, (e) => i(e, "text-[#4ec9b0]")), t = t.replace(/\b([a-z][a-zA-Z0-9]+)(?==)/g, (e) => i(e, "text-[#9cdcfe]")), t = t.replace(/(&lt;|&gt;|\{|\}|\/|:|,)/g, "<span class=\"text-gray-500\">$1</span>"), Object.entries(n).forEach(([e, n]) => {
+		t = t.replace(e, n);
+	}), t;
+}), y = (e, t) => n(() => _(e, t), [e, t]), b = (e) => {
+	let [n, r] = i(0);
+	return t(() => {
 		if (!e.current) return;
 		let t = new ResizeObserver((e) => {
-			for (let t of e) n(t.contentRect.width);
+			for (let t of e) r(t.contentRect.width);
 		});
 		return t.observe(e.current), () => t.disconnect();
-	}, [e]), t;
-}, h = /* @__PURE__ */ s(((e) => {
+	}, [e]), n;
+}, x = /* @__PURE__ */ o(((e) => {
 	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
 	function r(e, n, r) {
 		var i = null;
@@ -83,7 +264,7 @@ var s = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		};
 	}
 	e.Fragment = n, e.jsx = r, e.jsxs = r;
-})), g = /* @__PURE__ */ s(((e) => {
+})), S = /* @__PURE__ */ o(((e) => {
 	process.env.NODE_ENV !== "production" && (function() {
 		function t(e) {
 			if (e == null) return null;
@@ -146,7 +327,7 @@ var s = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		function o() {
 			return Error("react-stack-top-frame");
 		}
-		function s(e) {
+		function c(e) {
 			if (j.call(e, "key")) {
 				var t = Object.getOwnPropertyDescriptor(e, "key").get;
 				if (t && t.isReactWarning) return !1;
@@ -202,7 +383,7 @@ var s = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 				value: a
 			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
 		}
-		function f(e, n, i, o, c, u) {
+		function f(e, n, i, o, s, u) {
 			var f = n.children;
 			if (f !== void 0) if (o) if (M(f)) {
 				for (o = 0; o < f.length; o++) p(f[o]);
@@ -216,9 +397,9 @@ var s = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 				});
 				o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", R[f + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", o, f, m, f), R[f + o] = !0);
 			}
-			if (f = null, i !== void 0 && (r(i), f = "" + i), s(n) && (r(n.key), f = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
+			if (f = null, i !== void 0 && (r(i), f = "" + i), c(n) && (r(n.key), f = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
 			else i = n;
-			return f && l(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, i, a(), c, u);
+			return f && l(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, i, a(), s, u);
 		}
 		function p(e) {
 			m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
@@ -226,7 +407,7 @@ var s = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		function m(e) {
 			return typeof e == "object" && !!e && e.$$typeof === g;
 		}
-		var h = c("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
+		var h = s("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
 			return null;
 		};
 		h = { react_stack_bottom_frame: function(e) {
@@ -241,195 +422,182 @@ var s = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
 		};
 	})();
-})), _ = (/* @__PURE__ */ s(((e, t) => {
-	process.env.NODE_ENV === "production" ? t.exports = h() : t.exports = g();
-})))(), v = t(({ artworkUrl: e, title: t, isPlaying: n, onToggle: r, isLoading: i }) => /* @__PURE__ */ (0, _.jsxs)("div", {
+})), C = (/* @__PURE__ */ o(((e, t) => {
+	process.env.NODE_ENV === "production" ? t.exports = x() : t.exports = S();
+})))(), w = e(({ artworkUrl: e, title: t, isLoading: n }) => /* @__PURE__ */ (0, C.jsxs)("div", {
 	className: "relative flex-shrink-0 w-32 h-32 md:w-40 md:h-40 overflow-hidden rounded-[var(--wf-artwork-rounded,0.75rem)] shadow-lg group/artwork",
-	children: [/* @__PURE__ */ (0, _.jsx)("div", {
-		className: `w-full h-full transition-all duration-700 ${i ? "blur-md scale-110" : ""}`,
-		children: e ? /* @__PURE__ */ (0, _.jsx)("img", {
+	children: [/* @__PURE__ */ (0, C.jsx)("div", {
+		className: `w-full h-full transition-all duration-700 ${n ? "blur-md scale-110" : ""}`,
+		children: e ? /* @__PURE__ */ (0, C.jsx)("img", {
 			src: e,
 			alt: t,
 			className: "w-full h-full object-cover transition-transform duration-500 group-hover/artwork:scale-110"
-		}) : /* @__PURE__ */ (0, _.jsx)("div", {
+		}) : /* @__PURE__ */ (0, C.jsx)("div", {
 			className: "w-full h-full bg-gradient-to-br from-[var(--wf-placeholder-from,#fb923c)] to-[var(--wf-placeholder-to,#ec4899)] flex items-center justify-center",
-			children: /* @__PURE__ */ (0, _.jsx)("svg", {
+			children: /* @__PURE__ */ (0, C.jsx)("svg", {
 				className: "w-16 h-16 text-white opacity-50",
 				fill: "currentColor",
 				viewBox: "0 0 24 24",
-				children: /* @__PURE__ */ (0, _.jsx)("path", { d: "M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" })
+				children: /* @__PURE__ */ (0, C.jsx)("path", { d: "M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" })
 			})
 		})
-	}), i ? /* @__PURE__ */ (0, _.jsx)("div", {
+	}), n && /* @__PURE__ */ (0, C.jsx)("div", {
 		className: "absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-[1px]",
-		children: /* @__PURE__ */ (0, _.jsx)("div", { className: "w-8 h-8 border-4 border-white/30 border-t-white rounded-full animate-spin" })
-	}) : /* @__PURE__ */ (0, _.jsx)("button", {
-		className: "absolute inset-0 bg-[var(--wf-overlay-color,rgba(0,0,0,0.3))] backdrop-blur-[var(--wf-overlay-blur,2px)] opacity-0 group-hover/artwork:opacity-100 transition-opacity duration-300 flex items-center justify-center cursor-pointer border-none outline-none",
-		onClick: r,
-		"aria-label": n ? "Pause" : "Play",
-		children: /* @__PURE__ */ (0, _.jsx)("div", {
-			className: "w-14 h-14 flex items-center justify-center bg-[var(--wf-play-btn-bg,#f97316)] rounded-full text-[var(--wf-play-btn-color,white)] shadow-lg transform scale-90 group-hover/artwork:scale-100 transition-transform duration-300",
-			children: n ? /* @__PURE__ */ (0, _.jsx)("svg", {
-				className: "w-8 h-8",
-				fill: "currentColor",
-				viewBox: "0 0 24 24",
-				children: /* @__PURE__ */ (0, _.jsx)("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" })
-			}) : /* @__PURE__ */ (0, _.jsx)("svg", {
-				className: "w-8 h-8 ml-1",
-				fill: "currentColor",
-				viewBox: "0 0 24 24",
-				children: /* @__PURE__ */ (0, _.jsx)("path", { d: "M8 5v14l11-7z" })
-			})
-		})
+		children: /* @__PURE__ */ (0, C.jsx)("div", { className: "w-8 h-8 border-4 border-white/30 border-t-white rounded-full animate-spin" })
 	})]
 }));
-v.displayName = "ArtworkOverlay";
+w.displayName = "ArtworkOverlay";
 //#endregion
 //#region src/organisms/Waveform.tsx
-var y = t(({ peaks: e, currentTime: t, duration: n, waveColor: i, progressColor: o, height: s, onSeek: c, resolution: l = "auto", barWidth: u = 2, barGap: d = 1 }) => {
-	let f = a(null), p = a(null), h = a(null), g = m(h);
-	r(() => {
+var T = e(({ peaks: e, currentTime: n, duration: i, waveColor: a, progressColor: o, height: s, onSeek: c, resolution: l = "auto", barWidth: u = 2, barGap: d = 1 }) => {
+	let f = r(null), p = r(null), m = r(null), h = b(m);
+	t(() => {
 		let t = f.current, n = p.current;
 		if (!t || !n) return;
-		let r = t.getContext("2d"), a = n.getContext("2d");
-		if (!r || !a) return;
+		let r = t.getContext("2d"), i = n.getContext("2d");
+		if (!r || !i) return;
 		let s = window.devicePixelRatio || 1, c = t.getBoundingClientRect(), m = c.width * s, h = c.height * s;
 		[t, n].forEach((e) => {
 			(e.width !== m || e.height !== h) && (e.width = m, e.height = h);
 		}), (() => {
 			if (e.length === 0) return;
 			let { width: n, height: c } = t;
-			r.clearRect(0, 0, n, c), a.clearRect(0, 0, n, c);
+			r.clearRect(0, 0, n, c), i.clearRect(0, 0, n, c);
 			let f = n / e.length, p = typeof l == "number" ? f * .7 : u * s, m = typeof l == "number" ? f * .3 : d * s;
-			r.lineCap = "round", r.lineWidth = p, a.lineCap = "round", a.lineWidth = p, e.forEach((e, t) => {
+			r.lineCap = "round", r.lineWidth = p, i.lineCap = "round", i.lineWidth = p, e.forEach((e, t) => {
 				let n = t * (p + m) + p / 2, s = e * c * .8, l = (c - s) / 2, u = l + s;
-				r.beginPath(), r.strokeStyle = i, r.moveTo(n, l), r.lineTo(n, u), r.stroke(), a.beginPath(), a.strokeStyle = o, a.moveTo(n, l), a.lineTo(n, u), a.stroke();
+				r.beginPath(), r.strokeStyle = a, r.moveTo(n, l), r.lineTo(n, u), r.stroke(), i.beginPath(), i.strokeStyle = o, i.moveTo(n, l), i.lineTo(n, u), i.stroke();
 			});
 		})();
 	}, [
 		e,
-		i,
+		a,
 		o,
 		l,
 		u,
 		d,
 		s
 	]);
-	let v = (e) => {
-		if (h.current && n) {
-			let t = h.current.getBoundingClientRect(), n = e.clientX - t.left;
+	let g = (e) => {
+		if (m.current && i) {
+			let t = m.current.getBoundingClientRect(), n = e.clientX - t.left;
 			c(Math.max(0, Math.min(1, n / t.width)));
 		}
-	}, y = n ? t / n * 100 : 0;
-	return /* @__PURE__ */ (0, _.jsxs)("div", {
-		ref: h,
+	}, _ = i ? n / i * 100 : 0;
+	return /* @__PURE__ */ (0, C.jsxs)("div", {
+		ref: m,
 		className: "relative w-full cursor-pointer overflow-hidden",
 		style: { height: `${s}px` },
-		onClick: v,
-		children: [/* @__PURE__ */ (0, _.jsx)("canvas", {
+		onClick: g,
+		children: [/* @__PURE__ */ (0, C.jsx)("canvas", {
 			ref: f,
 			className: "absolute inset-0 w-full h-full"
-		}), /* @__PURE__ */ (0, _.jsx)("div", {
+		}), /* @__PURE__ */ (0, C.jsx)("div", {
 			className: "absolute inset-0 h-full overflow-hidden transition-[width] duration-100 ease-linear pointer-events-none",
-			style: { width: `${y}%` },
-			children: /* @__PURE__ */ (0, _.jsx)("canvas", {
+			style: { width: `${_}%` },
+			children: /* @__PURE__ */ (0, C.jsx)("canvas", {
 				ref: p,
 				className: "absolute h-full",
-				style: { width: `${g}px` }
+				style: { width: `${h}px` }
 			})
 		})]
 	});
 });
-y.displayName = "Waveform";
+T.displayName = "Waveform";
 //#endregion
 //#region src/components/WaveframePlayer.tsx
-var b = t(({ audioUrl: t, peaks: n, artworkUrl: a, title: s, artist: c, waveColor: f, progressColor: h, height: g = 80, className: b = "", style: x, resolution: S = "auto", barWidth: C = 2, barGap: w = 1, theme: T, autoAnalyze: E = !0 }) => {
-	let { isPlaying: D, currentTime: O, duration: k, togglePlay: A, seek: j, audioProps: M } = l(t), N = e.useRef(null), P = m(N), [F, I] = o(void 0), [L, R] = o(!1);
-	r(() => {
-		!n && E && t ? (async () => {
-			R(!0);
-			try {
-				I(await u(t, 512));
-			} catch (e) {
-				console.error("Auto-analysis failed", e);
-			} finally {
-				R(!1);
-			}
-		})() : I(void 0);
-	}, [
-		t,
-		n,
-		E
-	]);
-	let z = n || F || [], B = p(z, i(() => typeof S == "number" ? S : P > 0 ? Math.max(1, Math.floor(P / (C + w))) : z.length || 1, [
-		S,
-		P,
-		C,
-		w,
-		z.length
-	])), V = i(() => f || (T ? T.bg === "#ffffff" ? "#e5e7eb" : "#374151" : "#e5e7eb"), [f, T]), H = h || T?.primary || "#3b82f6", U = i(() => ({
-		"--wf-bg-color": T?.bg || "white",
-		"--wf-border-color": T?.border || "#f3f4f6",
-		"--wf-title-color": T?.text || "#111827",
-		"--wf-artist-color": T?.text || "#6b7280",
-		"--wf-time-color": T?.text || "#9ca3af",
-		"--wf-play-btn-bg": T?.primary || "#3b82f6",
-		"--wf-placeholder-from": T?.primary || "#fb923c",
-		"--wf-placeholder-to": T?.bg || "#ec4899",
-		...x
-	}), [T, x]);
-	return /* @__PURE__ */ (0, _.jsxs)("div", {
-		className: `group relative flex flex-col md:flex-row items-center gap-6 p-6 bg-[var(--wf-bg-color,white)] border border-[var(--wf-border-color,#f3f4f6)] rounded-[var(--wf-rounded,1rem)] shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden ${b}`,
-		style: U,
-		children: [
-			/* @__PURE__ */ (0, _.jsx)(v, {
-				artworkUrl: a,
-				title: s,
-				isPlaying: D,
-				onToggle: A,
-				isLoading: L
-			}),
-			/* @__PURE__ */ (0, _.jsxs)("div", {
-				className: "flex-1 w-full flex flex-col justify-between py-1",
-				children: [/* @__PURE__ */ (0, _.jsxs)("div", {
-					className: "mb-4",
-					children: [/* @__PURE__ */ (0, _.jsxs)("div", {
-						className: "flex items-center justify-between mb-1",
-						children: [s && /* @__PURE__ */ (0, _.jsx)("h3", {
-							className: "text-xl md:text-2xl font-black text-[var(--wf-title-color,#111827)] tracking-tight line-clamp-1",
-							children: s
-						}), /* @__PURE__ */ (0, _.jsxs)("div", {
-							className: "text-xs font-mono text-[var(--wf-time-color,#9ca3af)] tabular-nums",
+var E = e(({ media: e, peaks: a, artwork: o, title: s, artist: c, waveColor: l, progressColor: u, height: d = 80, className: p = "", style: m, resolution: h = "auto", barWidth: _ = 2, barGap: v = 1, theme: x, engine: S }) => {
+	let { state: E, togglePlay: D, seek: O } = f(e, {
+		peaks: a,
+		engine: S
+	}), { isPlaying: k, currentTime: A, duration: j, peaks: M, isAnalyzing: N } = E, [P, F] = i(typeof o == "string" ? o : void 0);
+	t(() => {
+		if (o instanceof Blob) {
+			let e = URL.createObjectURL(o);
+			return F(e), () => URL.revokeObjectURL(e);
+		} else F(o);
+	}, [o]);
+	let I = r(null), L = b(I), R = y(M, n(() => typeof h == "number" ? h : L > 0 ? Math.max(1, Math.floor(L / (_ + v))) : M.length || 1, [
+		h,
+		L,
+		_,
+		v,
+		M.length
+	])), z = n(() => l || (x ? x.bg === "#ffffff" ? "#e5e7eb" : "#374151" : "#e5e7eb"), [l, x]), B = u || x?.primary || "#3b82f6", V = n(() => ({
+		"--wf-bg-color": x?.bg || "white",
+		"--wf-border-color": x?.border || "#f3f4f6",
+		"--wf-title-color": x?.text || "#111827",
+		"--wf-artist-color": x?.text || "#6b7280",
+		"--wf-time-color": x?.text || "#9ca3af",
+		"--wf-play-btn-bg": x?.primary || "#3b82f6",
+		"--wf-placeholder-from": x?.primary || "#fb923c",
+		"--wf-placeholder-to": x?.bg || "#ec4899",
+		...m
+	}), [x, m]);
+	return /* @__PURE__ */ (0, C.jsxs)("div", {
+		className: `group relative flex flex-col md:flex-row items-stretch gap-6 p-6 bg-[var(--wf-bg-color,white)] border border-[var(--wf-border-color,#f3f4f6)] rounded-[var(--wf-rounded,1rem)] shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden ${p}`,
+		style: V,
+		children: [/* @__PURE__ */ (0, C.jsx)(w, {
+			artworkUrl: P,
+			title: s,
+			isLoading: N
+		}), /* @__PURE__ */ (0, C.jsxs)("div", {
+			className: "flex-1 w-full flex flex-col min-w-0",
+			children: [/* @__PURE__ */ (0, C.jsxs)("div", {
+				className: "flex items-center gap-4 mb-6",
+				children: [/* @__PURE__ */ (0, C.jsx)("button", {
+					onClick: D,
+					className: "w-12 h-12 md:w-14 md:h-14 flex-shrink-0 flex items-center justify-center rounded-full bg-[var(--wf-play-btn-bg,#3b82f6)] text-white shadow-[0_4px_12px_rgba(0,0,0,0.15)] hover:shadow-[0_6px_16px_rgba(0,0,0,0.2)] transition-all hover:scale-105 active:scale-95 cursor-pointer border-none outline-none group/play",
+					children: k ? /* @__PURE__ */ (0, C.jsx)("svg", {
+						className: "w-6 h-6 md:w-7 md:h-7",
+						fill: "currentColor",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ (0, C.jsx)("path", { d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z" })
+					}) : /* @__PURE__ */ (0, C.jsx)("svg", {
+						className: "w-6 h-6 md:w-7 md:h-7 ml-1",
+						fill: "currentColor",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ (0, C.jsx)("path", { d: "M8 5v14l11-7z" })
+					})
+				}), /* @__PURE__ */ (0, C.jsxs)("div", {
+					className: "flex-1 flex flex-col min-w-0",
+					children: [/* @__PURE__ */ (0, C.jsxs)("div", {
+						className: "flex items-center justify-between gap-4",
+						children: [c && /* @__PURE__ */ (0, C.jsx)("p", {
+							className: "text-[10px] md:text-xs font-bold uppercase text-[var(--wf-artist-color,#6b7280)] opacity-60 tracking-[0.1em] line-clamp-1",
+							children: c
+						}), /* @__PURE__ */ (0, C.jsxs)("div", {
+							className: "text-[10px] font-mono text-[var(--wf-time-color,#9ca3af)] tabular-nums flex-shrink-0",
 							children: [
-								d(O),
+								g(A),
 								" / ",
-								d(k)
+								g(j)
 							]
 						})]
-					}), c && /* @__PURE__ */ (0, _.jsx)("p", {
-						className: "text-sm md:text-base font-medium text-[var(--wf-artist-color,#6b7280)] line-clamp-1 tracking-wide",
-						children: c
+					}), s && /* @__PURE__ */ (0, C.jsx)("h3", {
+						className: "text-lg md:text-xl font-black text-[var(--wf-title-color,#111827)] tracking-tight line-clamp-1 mt-0.5 leading-tight",
+						children: s
 					})]
-				}), /* @__PURE__ */ (0, _.jsx)("div", {
-					ref: N,
-					children: /* @__PURE__ */ (0, _.jsx)(y, {
-						peaks: B,
-						currentTime: O,
-						duration: k,
-						waveColor: V,
-						progressColor: H,
-						height: g,
-						onSeek: j,
-						resolution: S,
-						barWidth: C,
-						barGap: w
-					})
 				})]
-			}),
-			/* @__PURE__ */ (0, _.jsx)("audio", { ...M })
-		]
+			}), /* @__PURE__ */ (0, C.jsx)("div", {
+				className: "mt-auto",
+				ref: I,
+				children: /* @__PURE__ */ (0, C.jsx)(T, {
+					peaks: R,
+					currentTime: A,
+					duration: j,
+					waveColor: z,
+					progressColor: B,
+					height: d,
+					onSeek: O,
+					resolution: h,
+					barWidth: _,
+					barGap: v
+				})
+			})]
+		})]
 	});
 });
-b.displayName = "WaveframePlayer";
+E.displayName = "WaveframePlayer";
 //#endregion
-export { b as WaveframePlayer };
+export { l as PeakAnalyzer, c as PlayerCore, u as WaveframeEngine, E as WaveframePlayer, g as formatTime, p as generatePeaks, v as highlightCode, m as loadAudioToMemory, _ as resamplePeaks, h as revokeAudioMemory, d as useWaveframeStore };