waveframe 0.2.2 → 0.3.1

package/dist/waveframe.es.js

@@ -1,603 +0,0 @@
-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 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.");
-}), 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;
-		}
-	}
-	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;
-		}
-		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();
-	}
-}, 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;
-	if (r > 1) for (let i = 0; i < t; i++) {
-		let t = 0, a = Math.floor(i * r), o = Math.floor((i + 1) * r);
-		for (let n = a; n < o; n++) e[n] > t && (t = e[n]);
-		n[i] = t;
-	}
-	else for (let i = 0; i < t; i++) {
-		let t = i * r, a = Math.floor(t), o = Math.min(a + 1, e.length - 1), s = t - a;
-		n[i] = e[a] + (e[o] - e[a]) * s;
-	}
-	return n;
-}, 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) r(t.contentRect.width);
-		});
-		return t.observe(e.current), () => t.disconnect();
-	}, [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;
-		if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
-		else r = n;
-		return n = r.ref, {
-			$$typeof: t,
-			type: e,
-			key: i,
-			ref: n === void 0 ? null : n,
-			props: r
-		};
-	}
-	e.Fragment = n, e.jsx = r, e.jsxs = r;
-})), S = /* @__PURE__ */ o(((e) => {
-	process.env.NODE_ENV !== "production" && (function() {
-		function t(e) {
-			if (e == null) return null;
-			if (typeof e == "function") return e.$$typeof === k ? null : e.displayName || e.name || null;
-			if (typeof e == "string") return e;
-			switch (e) {
-				case v: return "Fragment";
-				case b: return "Profiler";
-				case y: return "StrictMode";
-				case w: return "Suspense";
-				case T: return "SuspenseList";
-				case O: return "Activity";
-			}
-			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
-				case _: return "Portal";
-				case S: return e.displayName || "Context";
-				case x: return (e._context.displayName || "Context") + ".Consumer";
-				case C:
-					var n = e.render;
-					return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
-				case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
-				case D:
-					n = e._payload, e = e._init;
-					try {
-						return t(e(n));
-					} catch {}
-			}
-			return null;
-		}
-		function n(e) {
-			return "" + e;
-		}
-		function r(e) {
-			try {
-				n(e);
-				var t = !1;
-			} catch {
-				t = !0;
-			}
-			if (t) {
-				t = console;
-				var r = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-				return r.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), n(e);
-			}
-		}
-		function i(e) {
-			if (e === v) return "<>";
-			if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
-			try {
-				var n = t(e);
-				return n ? "<" + n + ">" : "<...>";
-			} catch {
-				return "<...>";
-			}
-		}
-		function a() {
-			var e = A.A;
-			return e === null ? null : e.getOwner();
-		}
-		function o() {
-			return Error("react-stack-top-frame");
-		}
-		function c(e) {
-			if (j.call(e, "key")) {
-				var t = Object.getOwnPropertyDescriptor(e, "key").get;
-				if (t && t.isReactWarning) return !1;
-			}
-			return e.key !== void 0;
-		}
-		function l(e, t) {
-			function n() {
-				P || (P = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
-			}
-			n.isReactWarning = !0, Object.defineProperty(e, "key", {
-				get: n,
-				configurable: !0
-			});
-		}
-		function u() {
-			var e = t(this.type);
-			return F[e] || (F[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
-		}
-		function d(e, t, n, r, i, a) {
-			var o = n.ref;
-			return e = {
-				$$typeof: g,
-				type: e,
-				key: t,
-				props: n,
-				_owner: r
-			}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
-				enumerable: !1,
-				value: null
-			}) : Object.defineProperty(e, "ref", {
-				enumerable: !1,
-				get: u
-			}), e._store = {}, Object.defineProperty(e._store, "validated", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: 0
-			}), Object.defineProperty(e, "_debugInfo", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: null
-			}), Object.defineProperty(e, "_debugStack", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: i
-			}), Object.defineProperty(e, "_debugTask", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: a
-			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-		}
-		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]);
-				Object.freeze && Object.freeze(f);
-			} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
-			else p(f);
-			if (j.call(n, "key")) {
-				f = t(e);
-				var m = Object.keys(n).filter(function(e) {
-					return e !== "key";
-				});
-				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), 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(), 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));
-		}
-		function m(e) {
-			return typeof e == "object" && !!e && e.$$typeof === g;
-		}
-		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) {
-			return e();
-		} };
-		var P, F = {}, I = h.react_stack_bottom_frame.bind(h, o)(), L = N(i(o)), R = {};
-		e.Fragment = v, e.jsx = function(e, t, n) {
-			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
-			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
-		}, e.jsxs = function(e, t, n) {
-			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
-			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
-		};
-	})();
-})), 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, 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, 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, C.jsx)("svg", {
-				className: "w-16 h-16 text-white opacity-50",
-				fill: "currentColor",
-				viewBox: "0 0 24 24",
-				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" })
-			})
-		})
-	}), n && /* @__PURE__ */ (0, C.jsx)("div", {
-		className: "absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-[1px]",
-		children: /* @__PURE__ */ (0, C.jsx)("div", { className: "w-8 h-8 border-4 border-white/30 border-t-white rounded-full animate-spin" })
-	})]
-}));
-w.displayName = "ArtworkOverlay";
-//#endregion
-//#region src/organisms/Waveform.tsx
-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"), 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), 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, 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 = 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,
-		a,
-		o,
-		l,
-		u,
-		d,
-		s
-	]);
-	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)));
-		}
-	}, _ = 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: g,
-		children: [/* @__PURE__ */ (0, C.jsx)("canvas", {
-			ref: f,
-			className: "absolute inset-0 w-full h-full"
-		}), /* @__PURE__ */ (0, C.jsx)("div", {
-			className: "absolute inset-0 h-full overflow-hidden transition-[width] duration-100 ease-linear pointer-events-none",
-			style: { width: `${_}%` },
-			children: /* @__PURE__ */ (0, C.jsx)("canvas", {
-				ref: p,
-				className: "absolute h-full",
-				style: { width: `${h}px` }
-			})
-		})]
-	});
-});
-T.displayName = "Waveform";
-//#endregion
-//#region src/components/WaveframePlayer.tsx
-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: [
-								g(A),
-								" / ",
-								g(j)
-							]
-						})]
-					}), 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, 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
-				})
-			})]
-		})]
-	});
-});
-E.displayName = "WaveframePlayer";
-//#endregion
-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 };