waveframe 0.2.1 → 0.3.0

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 };

package/dist/waveframe.umd.js

@@ -1,7 +0,0 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`)):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Waveframe={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),l=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),l(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t,1);var u=class{audio;listeners=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()}},d=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)}},f=class{player;analyzer;listeners=new Set;_state;_media=null;_objectUrl=null;constructor(){this.player=new u,this.analyzer=new d,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()}},p=e=>(0,t.useSyncExternalStore)(t=>e.subscribe(t),()=>e.getSnapshot()),m=(e,n={})=>{let{peaks:r,engine:i}=n,a=(0,t.useMemo)(()=>i||new f,[i]),o=i||a,s=p(o);return(0,t.useEffect)(()=>{e&&o.load(e,r)},[o,e,r]),(0,t.useEffect)(()=>()=>{i||a.dispose()},[a,i]),{state:s,engine:o,togglePlay:()=>o.togglePlay(),play:()=>o.play(),pause:()=>o.pause(),seek:e=>o.seek(e),setVolume:e=>o.setVolume(e),setMuted:e=>o.setMuted(e),analyze:e=>o.analyze(e)}},h=async(e,t=512)=>{let n=new d;try{return await n.generatePeaks(e,t)}finally{n.dispose()}},g=async e=>{let t=await(await fetch(e)).blob();return URL.createObjectURL(t)},_=e=>{e&&e.startsWith(`blob:`)&&URL.revokeObjectURL(e)},v=e=>isNaN(e)?`0:00`:`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,`0`)}`,y=(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},b=e=>e.split(`
-`).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}),x=(e,n)=>(0,t.useMemo)(()=>y(e,n),[e,n]),S=e=>{let[n,r]=(0,t.useState)(0);return(0,t.useEffect)(()=>{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},C=c((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})),w=c((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===O?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D: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 g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E: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===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=k.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(A.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){N||(N=!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 l(){var e=t(this.type);return P[e]||(P[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 u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,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:l}),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 d(e,n,i,o,l,d){var p=n.children;if(p!==void 0)if(o)if(j(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}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 f(p);if(A.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,L[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require(`react`),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),T=c(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=C():t.exports=w()}))(),E=(0,t.memo)(({artworkUrl:e,title:t,isLoading:n})=>(0,T.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:[(0,T.jsx)(`div`,{className:`w-full h-full transition-all duration-700 ${n?`blur-md scale-110`:``}`,children:e?(0,T.jsx)(`img`,{src:e,alt:t,className:`w-full h-full object-cover transition-transform duration-500 group-hover/artwork:scale-110`}):(0,T.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:(0,T.jsx)(`svg`,{className:`w-16 h-16 text-white opacity-50`,fill:`currentColor`,viewBox:`0 0 24 24`,children:(0,T.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&&(0,T.jsx)(`div`,{className:`absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-[1px]`,children:(0,T.jsx)(`div`,{className:`w-8 h-8 border-4 border-white/30 border-t-white rounded-full animate-spin`})})]}));E.displayName=`ArtworkOverlay`;var D=(0,t.memo)(({peaks:e,currentTime:n,duration:r,waveColor:i,progressColor:a,height:o,onSeek:s,resolution:c=`auto`,barWidth:l=2,barGap:u=1})=>{let d=(0,t.useRef)(null),f=(0,t.useRef)(null),p=(0,t.useRef)(null),m=S(p);(0,t.useEffect)(()=>{let t=d.current,n=f.current;if(!t||!n)return;let r=t.getContext(`2d`),o=n.getContext(`2d`);if(!r||!o)return;let s=window.devicePixelRatio||1,p=t.getBoundingClientRect(),m=p.width*s,h=p.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:d}=t;r.clearRect(0,0,n,d),o.clearRect(0,0,n,d);let f=n/e.length,p=typeof c==`number`?f*.7:l*s,m=typeof c==`number`?f*.3:u*s;r.lineCap=`round`,r.lineWidth=p,o.lineCap=`round`,o.lineWidth=p,e.forEach((e,t)=>{let n=t*(p+m)+p/2,s=e*d*.8,c=(d-s)/2,l=c+s;r.beginPath(),r.strokeStyle=i,r.moveTo(n,c),r.lineTo(n,l),r.stroke(),o.beginPath(),o.strokeStyle=a,o.moveTo(n,c),o.lineTo(n,l),o.stroke()})})()},[e,i,a,c,l,u,o]);let h=e=>{if(p.current&&r){let t=p.current.getBoundingClientRect(),n=e.clientX-t.left;s(Math.max(0,Math.min(1,n/t.width)))}},g=r?n/r*100:0;return(0,T.jsxs)(`div`,{ref:p,className:`relative w-full cursor-pointer overflow-hidden`,style:{height:`${o}px`},onClick:h,children:[(0,T.jsx)(`canvas`,{ref:d,className:`absolute inset-0 w-full h-full`}),(0,T.jsx)(`div`,{className:`absolute inset-0 h-full overflow-hidden transition-[width] duration-100 ease-linear pointer-events-none`,style:{width:`${g}%`},children:(0,T.jsx)(`canvas`,{ref:f,className:`absolute h-full`,style:{width:`${m}px`}})})]})});D.displayName=`Waveform`;var O=(0,t.memo)(({media:e,peaks:n,artwork:r,title:i,artist:a,waveColor:o,progressColor:s,height:c=80,className:l=``,style:u,resolution:d=`auto`,barWidth:f=2,barGap:p=1,theme:h,engine:g})=>{let{state:_,togglePlay:y,seek:b}=m(e,{peaks:n,engine:g}),{isPlaying:C,currentTime:w,duration:O,peaks:k,isAnalyzing:A}=_,[j,M]=(0,t.useState)(typeof r==`string`?r:void 0);(0,t.useEffect)(()=>{if(r instanceof Blob){let e=URL.createObjectURL(r);return M(e),()=>URL.revokeObjectURL(e)}else M(r)},[r]);let N=(0,t.useRef)(null),P=S(N),F=x(k,(0,t.useMemo)(()=>typeof d==`number`?d:P>0?Math.max(1,Math.floor(P/(f+p))):k.length||1,[d,P,f,p,k.length])),I=(0,t.useMemo)(()=>o||(h?h.bg===`#ffffff`?`#e5e7eb`:`#374151`:`#e5e7eb`),[o,h]),L=s||h?.primary||`#3b82f6`,R=(0,t.useMemo)(()=>({"--wf-bg-color":h?.bg||`white`,"--wf-border-color":h?.border||`#f3f4f6`,"--wf-title-color":h?.text||`#111827`,"--wf-artist-color":h?.text||`#6b7280`,"--wf-time-color":h?.text||`#9ca3af`,"--wf-play-btn-bg":h?.primary||`#3b82f6`,"--wf-placeholder-from":h?.primary||`#fb923c`,"--wf-placeholder-to":h?.bg||`#ec4899`,...u}),[h,u]);return(0,T.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 ${l}`,style:R,children:[(0,T.jsx)(E,{artworkUrl:j,title:i,isLoading:A}),(0,T.jsxs)(`div`,{className:`flex-1 w-full flex flex-col min-w-0`,children:[(0,T.jsxs)(`div`,{className:`flex items-center gap-4 mb-6`,children:[(0,T.jsx)(`button`,{onClick:y,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:C?(0,T.jsx)(`svg`,{className:`w-6 h-6 md:w-7 md:h-7`,fill:`currentColor`,viewBox:`0 0 24 24`,children:(0,T.jsx)(`path`,{d:`M6 19h4V5H6v14zm8-14v14h4V5h-4z`})}):(0,T.jsx)(`svg`,{className:`w-6 h-6 md:w-7 md:h-7 ml-1`,fill:`currentColor`,viewBox:`0 0 24 24`,children:(0,T.jsx)(`path`,{d:`M8 5v14l11-7z`})})}),(0,T.jsxs)(`div`,{className:`flex-1 flex flex-col min-w-0`,children:[(0,T.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[a&&(0,T.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:a}),(0,T.jsxs)(`div`,{className:`text-[10px] font-mono text-[var(--wf-time-color,#9ca3af)] tabular-nums flex-shrink-0`,children:[v(w),` / `,v(O)]})]}),i&&(0,T.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:i})]})]}),(0,T.jsx)(`div`,{className:`mt-auto`,ref:N,children:(0,T.jsx)(D,{peaks:F,currentTime:w,duration:O,waveColor:I,progressColor:L,height:c,onSeek:b,resolution:d,barWidth:f,barGap:p})})]})]})});O.displayName=`WaveframePlayer`,e.PeakAnalyzer=d,e.PlayerCore=u,e.WaveframeEngine=f,e.WaveframePlayer=O,e.formatTime=v,e.generatePeaks=h,e.highlightCode=b,e.loadAudioToMemory=g,e.resamplePeaks=y,e.revokeAudioMemory=_,e.useWaveframeStore=p});