@arraypress/waveform-player-react 0.1.0

package/dist/index.js

@@ -0,0 +1,197 @@
+import { forwardRef, useRef, useEffect, useImperativeHandle } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/WaveformPlayer.tsx
+function buildLibraryOptions(props) {
+  const opts = {};
+  if (props.url !== void 0) opts.url = props.url;
+  if (props.audioMode !== void 0) opts.audioMode = props.audioMode;
+  if (props.preload !== void 0) opts.preload = props.preload;
+  if (props.waveformStyle !== void 0) opts.waveformStyle = props.waveformStyle;
+  if (props.height !== void 0) opts.height = props.height;
+  if (props.samples !== void 0) opts.samples = props.samples;
+  if (props.barWidth !== void 0) opts.barWidth = props.barWidth;
+  if (props.barSpacing !== void 0) opts.barSpacing = props.barSpacing;
+  if (props.waveform !== void 0 && props.waveform !== null) {
+    opts.waveform = props.waveform;
+  }
+  if (props.colorPreset !== void 0) opts.colorPreset = props.colorPreset;
+  if (props.waveformColor !== void 0) opts.waveformColor = props.waveformColor;
+  if (props.progressColor !== void 0) opts.progressColor = props.progressColor;
+  if (props.buttonColor !== void 0) opts.buttonColor = props.buttonColor;
+  if (props.buttonHoverColor !== void 0) opts.buttonHoverColor = props.buttonHoverColor;
+  if (props.textColor !== void 0) opts.textColor = props.textColor;
+  if (props.textSecondaryColor !== void 0) opts.textSecondaryColor = props.textSecondaryColor;
+  if (props.backgroundColor !== void 0) opts.backgroundColor = props.backgroundColor;
+  if (props.borderColor !== void 0) opts.borderColor = props.borderColor;
+  if (props.playbackRate !== void 0) opts.playbackRate = props.playbackRate;
+  if (props.showPlaybackSpeed !== void 0) opts.showPlaybackSpeed = props.showPlaybackSpeed;
+  if (props.playbackRates !== void 0) opts.playbackRates = props.playbackRates;
+  if (props.showControls !== void 0) opts.showControls = props.showControls;
+  if (props.showInfo !== void 0) opts.showInfo = props.showInfo;
+  if (props.showTime !== void 0) opts.showTime = props.showTime;
+  if (props.showHoverTime !== void 0) opts.showHoverTime = props.showHoverTime;
+  if (props.showBPM !== void 0) opts.showBPM = props.showBPM;
+  if (props.buttonAlign !== void 0) opts.buttonAlign = props.buttonAlign;
+  if (props.markers !== void 0) opts.markers = props.markers;
+  if (props.showMarkers !== void 0) opts.showMarkers = props.showMarkers;
+  if (props.title !== void 0) opts.title = props.title;
+  if (props.subtitle !== void 0) opts.subtitle = props.subtitle;
+  if (props.artwork !== void 0) opts.artwork = props.artwork;
+  if (props.album !== void 0) opts.album = props.album;
+  if (props.autoplay !== void 0) opts.autoplay = props.autoplay;
+  if (props.singlePlay !== void 0) opts.singlePlay = props.singlePlay;
+  if (props.playOnSeek !== void 0) opts.playOnSeek = props.playOnSeek;
+  if (props.enableMediaSession !== void 0) opts.enableMediaSession = props.enableMediaSession;
+  if (props.playIcon !== void 0) opts.playIcon = props.playIcon;
+  if (props.pauseIcon !== void 0) opts.pauseIcon = props.pauseIcon;
+  if (props.onLoad) opts.onLoad = props.onLoad;
+  if (props.onPlay) opts.onPlay = props.onPlay;
+  if (props.onPause) opts.onPause = props.onPause;
+  if (props.onEnd) opts.onEnd = props.onEnd;
+  if (props.onTimeUpdate) opts.onTimeUpdate = props.onTimeUpdate;
+  if (props.onError) opts.onError = props.onError;
+  return opts;
+}
+var WaveformPlayer = forwardRef(
+  function WaveformPlayer2(props, ref) {
+    const containerRef = useRef(null);
+    const instanceRef = useRef(null);
+    useEffect(() => {
+      let cancelled = false;
+      let localInstance = null;
+      void import('@arraypress/waveform-player').then((mod) => {
+        if (cancelled) return;
+        const container = containerRef.current;
+        if (!container) return;
+        const WaveformPlayerClass = mod.default ?? mod.WaveformPlayer;
+        if (typeof WaveformPlayerClass !== "function") {
+          console.error(
+            "[waveform-player-react] Failed to resolve WaveformPlayer constructor from module."
+          );
+          return;
+        }
+        const opts = buildLibraryOptions(props);
+        localInstance = new WaveformPlayerClass(container, opts);
+        instanceRef.current = localInstance;
+      }).catch((err) => {
+        console.error("[waveform-player-react] Failed to load library:", err);
+      });
+      return () => {
+        cancelled = true;
+        const current = localInstance ?? instanceRef.current;
+        if (current && typeof current.destroy === "function") {
+          try {
+            current.destroy();
+          } catch (err) {
+            console.warn("[waveform-player-react] destroy() threw:", err);
+          }
+        }
+        instanceRef.current = null;
+      };
+    }, [
+      props.url,
+      props.audioMode,
+      props.preload,
+      props.waveformStyle,
+      props.height,
+      props.samples,
+      props.barWidth,
+      props.barSpacing,
+      props.waveform,
+      props.colorPreset,
+      props.waveformColor,
+      props.progressColor,
+      props.buttonColor,
+      props.buttonHoverColor,
+      props.textColor,
+      props.textSecondaryColor,
+      props.backgroundColor,
+      props.borderColor,
+      props.playbackRate,
+      props.showPlaybackSpeed,
+      props.playbackRates,
+      props.showControls,
+      props.showInfo,
+      props.showTime,
+      props.showHoverTime,
+      props.showBPM,
+      props.buttonAlign,
+      props.markers,
+      props.showMarkers,
+      props.title,
+      props.subtitle,
+      props.artwork,
+      props.album,
+      props.autoplay,
+      props.singlePlay,
+      props.playOnSeek,
+      props.enableMediaSession,
+      props.playIcon,
+      props.pauseIcon
+    ]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        play() {
+          const inst = instanceRef.current;
+          return inst?.play?.();
+        },
+        pause() {
+          const inst = instanceRef.current;
+          inst?.pause?.();
+        },
+        togglePlay() {
+          const inst = instanceRef.current;
+          inst?.togglePlay?.();
+        },
+        seekTo(seconds) {
+          const inst = instanceRef.current;
+          inst?.seekTo?.(seconds);
+        },
+        seekToPercent(percent) {
+          const inst = instanceRef.current;
+          inst?.seekToPercent?.(percent);
+        },
+        setVolume(volume) {
+          const inst = instanceRef.current;
+          inst?.setVolume?.(volume);
+        },
+        setPlaybackRate(rate) {
+          const inst = instanceRef.current;
+          inst?.setPlaybackRate?.(rate);
+        },
+        setPlayingState(playing) {
+          const inst = instanceRef.current;
+          inst?.setPlayingState?.(playing);
+        },
+        setProgress(currentTime, duration) {
+          const inst = instanceRef.current;
+          inst?.setProgress?.(currentTime, duration);
+        },
+        async loadTrack(url, title, subtitle, options) {
+          const inst = instanceRef.current;
+          if (!inst?.loadTrack) return;
+          await inst.loadTrack(url, title, subtitle, options);
+        },
+        get instance() {
+          return instanceRef.current;
+        }
+      }),
+      []
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        id: props.id,
+        className: ["wfp-host", props.className].filter(Boolean).join(" "),
+        style: props.style
+      }
+    );
+  }
+);
+
+export { WaveformPlayer, WaveformPlayer as default };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/WaveformPlayer.tsx"],"names":["WaveformPlayer"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * WaveformPlayer.tsx\n * ------------------\n *\n * React wrapper around `@arraypress/waveform-player`. Mounts a player\n * instance into a `<div>` on first render, tears it down on unmount,\n * and re-mounts when any \"identity\" prop changes (the props whose\n * change requires the library to start over from scratch — `url`,\n * `audioMode`).\n *\n * For non-identity props, this component currently re-creates the\n * instance as well, which is simpler than diffing every option and\n * calling the right granular updater. The trade-off is acceptable\n * because:\n *\n *   - The library re-uses any cached waveform data keyed by URL, so\n *     re-mounts on the same URL are cheap.\n *   - Per-render churn on a player widget is rare in practice.\n *\n * If you need finer control — imperative `loadTrack()`, `seekTo()`,\n * `setVolume()`, etc. — grab the instance through a `ref`:\n *\n * ```tsx\n * import { useRef, useEffect } from 'react';\n * import { WaveformPlayer, type WaveformPlayerHandle } from '@arraypress/waveform-player-react';\n *\n * function MyPlayer() {\n *   const ref = useRef<WaveformPlayerHandle>(null);\n *   return (\n *     <>\n *       <WaveformPlayer ref={ref} url=\"/audio/track.mp3\" />\n *       <button onClick={() => ref.current?.seekTo(60)}>Jump to 1:00</button>\n *     </>\n *   );\n * }\n * ```\n *\n * ## Library setup\n *\n * This component does **not** load the core library's CSS for you.\n * Import it once at your app entry:\n *\n * ```ts\n * import '@arraypress/waveform-player/dist/waveform-player.css';\n * ```\n *\n * The library's JS is imported dynamically inside `useEffect` so it\n * only loads on the client (SSR-safe).\n *\n * @module WaveformPlayer\n */\nimport {\n\tforwardRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\ttype ForwardedRef,\n} from 'react';\nimport type { WaveformPlayerHandle, WaveformPlayerProps } from './types';\n\n/**\n * Convert a `WaveformPlayerProps` object into the option shape the\n * core library accepts. Most fields pass straight through; this\n * helper exists so the option-building logic is testable on its own\n * and the component body stays focused on lifecycle.\n *\n * @param props - The component's resolved props.\n * @returns An options object to pass into `new WaveformPlayer(el, …)`.\n */\nfunction buildLibraryOptions(props: WaveformPlayerProps): Record<string, unknown> {\n\tconst opts: Record<string, unknown> = {};\n\n\t/* Audio source */\n\tif (props.url !== undefined) opts.url = props.url;\n\tif (props.audioMode !== undefined) opts.audioMode = props.audioMode;\n\tif (props.preload !== undefined) opts.preload = props.preload;\n\n\t/* Waveform visualisation */\n\tif (props.waveformStyle !== undefined) opts.waveformStyle = props.waveformStyle;\n\tif (props.height !== undefined) opts.height = props.height;\n\tif (props.samples !== undefined) opts.samples = props.samples;\n\tif (props.barWidth !== undefined) opts.barWidth = props.barWidth;\n\tif (props.barSpacing !== undefined) opts.barSpacing = props.barSpacing;\n\tif (props.waveform !== undefined && props.waveform !== null) {\n\t\topts.waveform = props.waveform;\n\t}\n\n\t/* Colours */\n\tif (props.colorPreset !== undefined) opts.colorPreset = props.colorPreset;\n\tif (props.waveformColor !== undefined) opts.waveformColor = props.waveformColor;\n\tif (props.progressColor !== undefined) opts.progressColor = props.progressColor;\n\tif (props.buttonColor !== undefined) opts.buttonColor = props.buttonColor;\n\tif (props.buttonHoverColor !== undefined) opts.buttonHoverColor = props.buttonHoverColor;\n\tif (props.textColor !== undefined) opts.textColor = props.textColor;\n\tif (props.textSecondaryColor !== undefined) opts.textSecondaryColor = props.textSecondaryColor;\n\tif (props.backgroundColor !== undefined) opts.backgroundColor = props.backgroundColor;\n\tif (props.borderColor !== undefined) opts.borderColor = props.borderColor;\n\n\t/* Playback controls */\n\tif (props.playbackRate !== undefined) opts.playbackRate = props.playbackRate;\n\tif (props.showPlaybackSpeed !== undefined) opts.showPlaybackSpeed = props.showPlaybackSpeed;\n\tif (props.playbackRates !== undefined) opts.playbackRates = props.playbackRates;\n\n\t/* UI toggles */\n\tif (props.showControls !== undefined) opts.showControls = props.showControls;\n\tif (props.showInfo !== undefined) opts.showInfo = props.showInfo;\n\tif (props.showTime !== undefined) opts.showTime = props.showTime;\n\tif (props.showHoverTime !== undefined) opts.showHoverTime = props.showHoverTime;\n\tif (props.showBPM !== undefined) opts.showBPM = props.showBPM;\n\tif (props.buttonAlign !== undefined) opts.buttonAlign = props.buttonAlign;\n\n\t/* Markers */\n\tif (props.markers !== undefined) opts.markers = props.markers;\n\tif (props.showMarkers !== undefined) opts.showMarkers = props.showMarkers;\n\n\t/* Content metadata */\n\tif (props.title !== undefined) opts.title = props.title;\n\tif (props.subtitle !== undefined) opts.subtitle = props.subtitle;\n\tif (props.artwork !== undefined) opts.artwork = props.artwork;\n\tif (props.album !== undefined) opts.album = props.album;\n\n\t/* Behaviour */\n\tif (props.autoplay !== undefined) opts.autoplay = props.autoplay;\n\tif (props.singlePlay !== undefined) opts.singlePlay = props.singlePlay;\n\tif (props.playOnSeek !== undefined) opts.playOnSeek = props.playOnSeek;\n\tif (props.enableMediaSession !== undefined) opts.enableMediaSession = props.enableMediaSession;\n\n\t/* Icons */\n\tif (props.playIcon !== undefined) opts.playIcon = props.playIcon;\n\tif (props.pauseIcon !== undefined) opts.pauseIcon = props.pauseIcon;\n\n\t/* Callbacks — wired into the library's option-level callbacks\n\t *  rather than custom-event listeners. The library invokes\n\t *  these synchronously on the respective state change. */\n\tif (props.onLoad) opts.onLoad = props.onLoad;\n\tif (props.onPlay) opts.onPlay = props.onPlay;\n\tif (props.onPause) opts.onPause = props.onPause;\n\tif (props.onEnd) opts.onEnd = props.onEnd;\n\tif (props.onTimeUpdate) opts.onTimeUpdate = props.onTimeUpdate;\n\tif (props.onError) opts.onError = props.onError;\n\n\treturn opts;\n}\n\n/**\n * `WaveformPlayer` — React component wrapping\n * `@arraypress/waveform-player`.\n *\n * Render at the spot you want a waveform-driven audio player to\n * appear. The container `<div>` is rendered immediately for layout;\n * the actual player UI hydrates in once the library loads\n * client-side.\n *\n * @example Basic\n *   <WaveformPlayer url=\"/audio/track.mp3\" title=\"My Track\" />\n *\n * @example With ref for imperative control\n *   const ref = useRef<WaveformPlayerHandle>(null);\n *   <WaveformPlayer ref={ref} url={url} />\n *   <button onClick={() => ref.current?.togglePlay()}>Play/Pause</button>\n */\nexport const WaveformPlayer = forwardRef<WaveformPlayerHandle, WaveformPlayerProps>(\n\tfunction WaveformPlayer(props, ref: ForwardedRef<WaveformPlayerHandle>) {\n\t\tconst containerRef = useRef<HTMLDivElement | null>(null);\n\t\tconst instanceRef = useRef<unknown>(null);\n\n\t\t/**\n\t\t * Mount / re-mount lifecycle.\n\t\t *\n\t\t * The dep array intentionally contains EVERY prop the library\n\t\t * uses at construction time. When any of them change, this\n\t\t * effect tears down the old instance and creates a new one\n\t\t * with the updated options. That's simpler and more correct\n\t\t * than trying to partial-update the live instance, and the\n\t\t * library has built-in caches (waveform peaks keyed by URL)\n\t\t * that make same-URL re-mounts cheap.\n\t\t */\n\t\tuseEffect(() => {\n\t\t\tlet cancelled = false;\n\t\t\tlet localInstance: { destroy?: () => void } | null = null;\n\n\t\t\t/* The library is browser-only. Defer the import until we're\n\t\t\t * actually mounting client-side so SSR / RSC don't try to\n\t\t\t * evaluate the audio + canvas + fetch surface on the server.\n\t\t\t */\n\t\t\tvoid import('@arraypress/waveform-player')\n\t\t\t\t.then((mod) => {\n\t\t\t\t\tif (cancelled) return;\n\t\t\t\t\tconst container = containerRef.current;\n\t\t\t\t\tif (!container) return;\n\n\t\t\t\t\tconst WaveformPlayerClass = (mod.default ?? (mod as { WaveformPlayer?: unknown }).WaveformPlayer) as {\n\t\t\t\t\t\tnew (el: HTMLElement, opts: Record<string, unknown>): { destroy?: () => void };\n\t\t\t\t\t};\n\n\t\t\t\t\tif (typeof WaveformPlayerClass !== 'function') {\n\t\t\t\t\t\tconsole.error(\n\t\t\t\t\t\t\t'[waveform-player-react] Failed to resolve WaveformPlayer constructor from module.'\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst opts = buildLibraryOptions(props);\n\t\t\t\t\tlocalInstance = new WaveformPlayerClass(container, opts);\n\t\t\t\t\tinstanceRef.current = localInstance;\n\t\t\t\t})\n\t\t\t\t.catch((err) => {\n\t\t\t\t\tconsole.error('[waveform-player-react] Failed to load library:', err);\n\t\t\t\t});\n\n\t\t\treturn () => {\n\t\t\t\tcancelled = true;\n\t\t\t\tconst current = localInstance ?? (instanceRef.current as { destroy?: () => void } | null);\n\t\t\t\tif (current && typeof current.destroy === 'function') {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tcurrent.destroy();\n\t\t\t\t\t} catch (err) {\n\t\t\t\t\t\tconsole.warn('[waveform-player-react] destroy() threw:', err);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tinstanceRef.current = null;\n\t\t\t};\n\t\t\t/* Re-mount on any prop change. Listed exhaustively rather\n\t\t\t * than spread to make the intent explicit and to keep the\n\t\t\t * lint rule happy. Callbacks intentionally NOT in deps:\n\t\t\t * a parent re-rendering with a fresh inline function\n\t\t\t * shouldn't tear the player down. */\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [\n\t\t\tprops.url,\n\t\t\tprops.audioMode,\n\t\t\tprops.preload,\n\t\t\tprops.waveformStyle,\n\t\t\tprops.height,\n\t\t\tprops.samples,\n\t\t\tprops.barWidth,\n\t\t\tprops.barSpacing,\n\t\t\tprops.waveform,\n\t\t\tprops.colorPreset,\n\t\t\tprops.waveformColor,\n\t\t\tprops.progressColor,\n\t\t\tprops.buttonColor,\n\t\t\tprops.buttonHoverColor,\n\t\t\tprops.textColor,\n\t\t\tprops.textSecondaryColor,\n\t\t\tprops.backgroundColor,\n\t\t\tprops.borderColor,\n\t\t\tprops.playbackRate,\n\t\t\tprops.showPlaybackSpeed,\n\t\t\tprops.playbackRates,\n\t\t\tprops.showControls,\n\t\t\tprops.showInfo,\n\t\t\tprops.showTime,\n\t\t\tprops.showHoverTime,\n\t\t\tprops.showBPM,\n\t\t\tprops.buttonAlign,\n\t\t\tprops.markers,\n\t\t\tprops.showMarkers,\n\t\t\tprops.title,\n\t\t\tprops.subtitle,\n\t\t\tprops.artwork,\n\t\t\tprops.album,\n\t\t\tprops.autoplay,\n\t\t\tprops.singlePlay,\n\t\t\tprops.playOnSeek,\n\t\t\tprops.enableMediaSession,\n\t\t\tprops.playIcon,\n\t\t\tprops.pauseIcon,\n\t\t]);\n\n\t\t/**\n\t\t * Expose an imperative handle on the forwarded ref. Each\n\t\t * method is a thin pass-through to the live instance — if the\n\t\t * instance hasn't mounted yet (still loading async), calls are\n\t\t * no-ops (`pause`, `seekTo`, etc. return `undefined`).\n\t\t */\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => ({\n\t\t\t\tplay() {\n\t\t\t\t\tconst inst = instanceRef.current as { play?: () => Promise<void> | undefined } | null;\n\t\t\t\t\treturn inst?.play?.();\n\t\t\t\t},\n\t\t\t\tpause() {\n\t\t\t\t\tconst inst = instanceRef.current as { pause?: () => void } | null;\n\t\t\t\t\tinst?.pause?.();\n\t\t\t\t},\n\t\t\t\ttogglePlay() {\n\t\t\t\t\tconst inst = instanceRef.current as { togglePlay?: () => void } | null;\n\t\t\t\t\tinst?.togglePlay?.();\n\t\t\t\t},\n\t\t\t\tseekTo(seconds) {\n\t\t\t\t\tconst inst = instanceRef.current as { seekTo?: (s: number) => void } | null;\n\t\t\t\t\tinst?.seekTo?.(seconds);\n\t\t\t\t},\n\t\t\t\tseekToPercent(percent) {\n\t\t\t\t\tconst inst = instanceRef.current as { seekToPercent?: (p: number) => void } | null;\n\t\t\t\t\tinst?.seekToPercent?.(percent);\n\t\t\t\t},\n\t\t\t\tsetVolume(volume) {\n\t\t\t\t\tconst inst = instanceRef.current as { setVolume?: (v: number) => void } | null;\n\t\t\t\t\tinst?.setVolume?.(volume);\n\t\t\t\t},\n\t\t\t\tsetPlaybackRate(rate) {\n\t\t\t\t\tconst inst = instanceRef.current as { setPlaybackRate?: (r: number) => void } | null;\n\t\t\t\t\tinst?.setPlaybackRate?.(rate);\n\t\t\t\t},\n\t\t\t\tsetPlayingState(playing) {\n\t\t\t\t\tconst inst = instanceRef.current as { setPlayingState?: (p: boolean) => void } | null;\n\t\t\t\t\tinst?.setPlayingState?.(playing);\n\t\t\t\t},\n\t\t\t\tsetProgress(currentTime, duration) {\n\t\t\t\t\tconst inst = instanceRef.current as {\n\t\t\t\t\t\tsetProgress?: (c: number, d: number) => void;\n\t\t\t\t\t} | null;\n\t\t\t\t\tinst?.setProgress?.(currentTime, duration);\n\t\t\t\t},\n\t\t\t\tasync loadTrack(url, title, subtitle, options) {\n\t\t\t\t\tconst inst = instanceRef.current as {\n\t\t\t\t\t\tloadTrack?: (\n\t\t\t\t\t\t\tu: string,\n\t\t\t\t\t\t\tt?: string,\n\t\t\t\t\t\t\ts?: string,\n\t\t\t\t\t\t\to?: Record<string, unknown>\n\t\t\t\t\t\t) => Promise<void>;\n\t\t\t\t\t} | null;\n\t\t\t\t\tif (!inst?.loadTrack) return;\n\t\t\t\t\tawait inst.loadTrack(url, title, subtitle, options);\n\t\t\t\t},\n\t\t\t\tget instance() {\n\t\t\t\t\treturn instanceRef.current;\n\t\t\t\t},\n\t\t\t}),\n\t\t\t[]\n\t\t);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={containerRef}\n\t\t\t\tid={props.id}\n\t\t\t\tclassName={['wfp-host', props.className].filter(Boolean).join(' ')}\n\t\t\t\tstyle={props.style}\n\t\t\t/>\n\t\t);\n\t}\n);\n"]}

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@arraypress/waveform-player-react",
+  "version": "0.1.0",
+  "description": "React component wrapper for @arraypress/waveform-player — forwardRef-friendly, useEffect lifecycle, typed props for every library option.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "react",
+    "react-component",
+    "audio",
+    "player",
+    "waveform",
+    "visualization",
+    "music",
+    "sound",
+    "html5",
+    "web-audio",
+    "media-session",
+    "audio-player",
+    "waveform-visualization",
+    "podcast-player"
+  ],
+  "author": "ArrayPress",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arraypress/waveform-player-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/arraypress/waveform-player-react/issues"
+  },
+  "homepage": "https://waveformplayer.com",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/arraypress"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "@arraypress/waveform-player": "^1.6.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@arraypress/waveform-player": "^1.6.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.7"
+  }
+}