react-audio-wavekit 0.1.0

package/LICENSE

@@ -0,0 +1,116 @@
+CC0 1.0 Universal
+
+Statement of Purpose
+
+The laws of most jurisdictions throughout the world automatically confer
+exclusive Copyright and Related Rights (defined below) upon the creator and
+subsequent owner(s) (each and all, an "owner") of an original work of
+authorship and/or a database (each, a "Work").
+
+Certain owners wish to permanently relinquish those rights to a Work for the
+purpose of contributing to a commons of creative, cultural and scientific
+works ("Commons") that the public can reliably and without fear of later
+claims of infringement build upon, modify, incorporate in other works, reuse
+and redistribute as freely as possible in any form whatsoever and for any
+purposes, including without limitation commercial purposes. These owners may
+contribute to the Commons to promote the ideal of a free culture and the
+further production of creative and scientific works, or to gain reputation or
+greater distribution for their Work in part through the use and efforts of
+others.
+
+For these and/or other purposes and motivations, and without any expectation
+of additional consideration or compensation, the person associating CC0 with a
+Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
+and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
+and publicly distribute the Work under its terms, with knowledge of his or her
+Copyright and Related Rights in the Work and the meaning and intended legal
+effect of CC0 on those rights.
+
+1. Copyright and Related Rights. A Work made available under CC0 may be
+protected by copyright and related or neighboring rights ("Copyright and
+Related Rights"). Copyright and Related Rights include, but are not limited
+to, the following:
+
+  i. the right to reproduce, adapt, distribute, perform, display, communicate,
+  and translate a Work;
+
+  ii. moral rights retained by the original author(s) and/or performer(s);
+
+  iii. publicity and privacy rights pertaining to a person's image or likeness
+  depicted in a Work;
+
+  iv. rights protecting against unfair competition in regards to a Work,
+  subject to the limitations in paragraph 4(a), below;
+
+  v. rights protecting the extraction, dissemination, use and reuse of data in
+  a Work;
+
+  vi. database rights (such as those arising under Directive 96/9/EC of the
+  European Parliament and of the Council of 11 March 1996 on the legal
+  protection of databases, and under any national implementation thereof,
+  including any amended or successor version of such directive); and
+
+  vii. other similar, equivalent or corresponding rights throughout the world
+  based on applicable law or treaty, and any national implementations thereof.
+
+2. Waiver. To the greatest extent permitted by, but not in contravention of,
+applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
+unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
+and Related Rights and associated claims and causes of action, whether now
+known or unknown (including existing as well as future claims and causes of
+action), in the Work (i) in all territories worldwide, (ii) for the maximum
+duration provided by applicable law or treaty (including future time
+extensions), (iii) in any current or future medium and for any number of
+copies, and (iv) for any purpose whatsoever, including without limitation
+commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
+the Waiver for the benefit of each member of the public at large and to the
+detriment of Affirmer's heirs and successors, fully intending that such Waiver
+shall not be subject to revocation, rescission, cancellation, termination, or
+any other legal or equitable action to disrupt the quiet enjoyment of the Work
+by the public as contemplated by Affirmer's express Statement of Purpose.
+
+3. Public License Fallback. Should any part of the Waiver for any reason be
+judged legally invalid or ineffective under applicable law, then the Waiver
+shall be preserved to the maximum extent permitted taking into account
+Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
+is so judged Affirmer hereby grants to each affected person a royalty-free,
+non transferable, non sublicensable, non exclusive, irrevocable and
+unconditional license to exercise Affirmer's Copyright and Related Rights in
+the Work (i) in all territories worldwide, (ii) for the maximum duration
+provided by applicable law or treaty (including future time extensions), (iii)
+in any current or future medium and for any number of copies, and (iv) for any
+purpose whatsoever, including without limitation commercial, advertising or
+promotional purposes (the "License"). The License shall be deemed effective as
+of the date CC0 was applied by Affirmer to the Work. Should any part of the
+License for any reason be judged legally invalid or ineffective under
+applicable law, such partial invalidity or ineffectiveness shall not
+invalidate the remainder of the License, and in such case Affirmer hereby
+affirms that he or she will not (i) exercise any of his or her remaining
+Copyright and Related Rights in the Work or (ii) assert any associated claims
+and causes of action with respect to the Work, in either case contrary to
+Affirmer's express Statement of Purpose.
+
+4. Limitations and Disclaimers.
+
+  a. No trademark or patent rights held by Affirmer are waived, abandoned,
+  surrendered, licensed or otherwise affected by this document.
+
+  b. Affirmer offers the Work as-is and makes no representations or warranties
+  of any kind concerning the Work, express, implied, statutory or otherwise,
+  including without limitation warranties of title, merchantability, fitness
+  for a particular purpose, non infringement, or the absence of latent or
+  other defects, accuracy, or the present or absence of errors, whether or not
+  discoverable, all to the greatest extent permissible under applicable law.
+
+  c. Affirmer disclaims responsibility for clearing rights of other persons
+  that may apply to the Work or any use thereof, including without limitation
+  any person's Copyright and Related Rights in the Work. Further, Affirmer
+  disclaims responsibility for obtaining any necessary consents, permissions
+  or other rights required for any use of the Work.
+
+  d. Affirmer understands and acknowledges that Creative Commons is not a
+  party to this document and has no duty or obligation with respect to this
+  CC0 or use of the Work.
+
+For more information, please see
+<http://creativecommons.org/publicdomain/zero/1.0/>

package/README.md

@@ -0,0 +1,231 @@
+# react-audio-wavekit
+
+React components for audio waveform visualization and live recording.
+
+## Features
+
+- **Full TypeScript** - Complete type safety with detailed type definitions
+- **Easy to Use** - Simple API with sensible defaults, works out of the box
+- **Headless Hooks** - Full control with raw audio data for custom implementations
+- **SSR Safe** - Compatible with Next.js and other SSR frameworks
+
+## Installation
+
+```bash
+npm install react-audio-wavekit
+# or
+pnpm add react-audio-wavekit
+# or
+bun add react-audio-wavekit
+```
+
+**Requirements:** React 18+, Web Audio API, MediaRecorder API
+
+---
+
+## Waveform
+
+Visualize existing audio files (mp3, wav, etc.) with playhead and seek support.
+
+### AudioWaveform
+
+![AudioWaveform](https://react-audio-wavekit.netlify.app/audio-wave-form.png)
+
+Static waveform visualization with playhead and click-to-seek.
+
+[▶ Demo](https://react-audio-wavekit.netlify.app/?path=/story/waveform-audiowaveform--default)
+
+```tsx
+<AudioWaveform
+  blob={audioBlob}
+  currentTime={currentTime}
+  duration={duration}
+  onSeek={(time) => (audioRef.current.currentTime = time)}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `blob` | `Blob \| null` | - | Audio blob to visualize (required) |
+| `currentTime` | `number` | - | Current playback time in seconds |
+| `duration` | `number` | - | Total audio duration in seconds |
+| `onSeek` | `(time: number) => void` | - | Callback when user clicks on waveform |
+| `suspense` | `boolean` | `false` | Enable React Suspense mode |
+| `appearance` | `AudioWaveformAppearance` | - | See [Appearance Options](#appearance-options) |
+
+---
+
+## Recorder
+
+Real-time waveform visualization during recording using MediaRecorder API.
+
+### useAudioRecorder
+
+Headless hook to manage recording state. Use with recorder components below.
+
+**Config:**
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `mimeType` | `string \| (() => string)` | auto | MIME type for recording |
+| `audioConstraints` | `MediaTrackConstraints \| boolean` | `true` | Audio constraints for getUserMedia |
+| `onRecordingComplete` | `(blob: Blob) => void` | - | Callback when recording is complete |
+
+**Returns:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `startRecording` | `() => Promise<void>` | Start recording from microphone |
+| `stopRecording` | `() => void` | Stop recording and generate blob |
+| `pauseRecording` | `() => void` | Pause current recording |
+| `resumeRecording` | `() => void` | Resume paused recording |
+| `clearRecording` | `() => void` | Clear recording and reset state |
+| `mediaRecorder` | `MediaRecorder \| null` | MediaRecorder instance |
+| `recordingBlob` | `Blob \| null` | Recorded audio blob |
+| `recordingTime` | `number` | Recording duration in seconds |
+| `isRecording` | `boolean` | Whether currently recording |
+| `isPaused` | `boolean` | Whether recording is paused |
+| `error` | `Error \| null` | Any error that occurred |
+
+### LiveStreamingRecorder
+
+![LiveStreamingRecorder](https://react-audio-wavekit.netlify.app/live-stream.png)
+
+Scrolling timeline waveform (Voice Memos style). Canvas grows horizontally as recording continues.
+
+[▶ Demo](https://react-audio-wavekit.netlify.app/?path=/story/recorder-livestreamingrecorder--default)
+
+```tsx
+<LiveStreamingRecorder.Root
+  mediaRecorder={mediaRecorder}
+  className="h-12 w-80 rounded bg-slate-100"
+  appearance={{ scrollbar: { thumbColor: "#94a3b8" } }}
+>
+  <LiveStreamingRecorder.Canvas
+    appearance={{ barColor: "#3b82f6", barWidth: 2, barGap: 1 }}
+    growWidth={true}
+  />
+</LiveStreamingRecorder.Root>
+```
+
+**Root Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `mediaRecorder` | `MediaRecorder \| null` | - | MediaRecorder instance (required) |
+| `fftSize` | `number` | `2048` | FFT size for frequency analysis |
+| `smoothingTimeConstant` | `number` | `0.8` | Smoothing constant (0-1) |
+| `sampleInterval` | `number` | `50` | Sample interval in ms |
+| `appearance` | `LiveStreamingRecorderAppearance` | - | See [Appearance Options](#appearance-options) |
+
+**Canvas Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `growWidth` | `boolean` | `true` | Canvas grows horizontally (enables scrolling) |
+| `appearance` | `WaveformAppearance` | - | See [Appearance Options](#appearance-options) |
+
+### LiveStreamingStackRecorder
+
+![LiveStreamingStackRecorder](https://react-audio-wavekit.netlify.app/live-stream-stack.png)
+
+Fixed-width waveform where bars compress as recording grows.
+
+[▶ Demo](https://react-audio-wavekit.netlify.app/?path=/story/recorder-livestreamingstackrecorder--default)
+
+```tsx
+<LiveStreamingStackRecorder
+  mediaRecorder={mediaRecorder}
+  className="h-12 w-80 rounded bg-slate-100"
+  appearance={{ barColor: "#3b82f6", barWidth: 2, barGap: 1 }}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `mediaRecorder` | `MediaRecorder \| null` | - | MediaRecorder instance (required) |
+| `fftSize` | `number` | `2048` | FFT size for frequency analysis |
+| `smoothingTimeConstant` | `number` | `0.8` | Smoothing constant (0-1) |
+| `sampleInterval` | `number` | `50` | Sample interval in ms |
+| `appearance` | `WaveformAppearance` | - | See [Appearance Options](#appearance-options) |
+
+### LiveRecorder
+
+![LiveRecorder](https://react-audio-wavekit.netlify.app/live-recorder.png)
+
+Real-time frequency bars visualization.
+
+[▶ Demo](https://react-audio-wavekit.netlify.app/?path=/story/recorder-liverecorder--default)
+
+```tsx
+<LiveRecorder mediaRecorder={mediaRecorder} />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `mediaRecorder` | `MediaRecorder \| null` | - | MediaRecorder instance (required) |
+| `fftSize` | `number` | `2048` | FFT size for frequency analysis |
+| `smoothingTimeConstant` | `number` | `0.8` | Smoothing constant (0-1) |
+| `showIdleState` | `boolean` | `true` | Show minimal bars when not recording |
+| `appearance` | `WaveformAppearance` | - | See [Appearance Options](#appearance-options) |
+
+---
+
+## Appearance Options
+
+### WaveformAppearance
+
+Common appearance options for all waveform components.
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `barColor` | `string` | `"#3b82f6"` | Color of waveform bars |
+| `barWidth` | `number` | `1` | Width of each bar in pixels |
+| `barGap` | `number` | `1` | Gap between bars in pixels |
+| `barRadius` | `number` | `0` | Border radius of bars |
+| `barHeightScale` | `number` | `0.95` | Scale factor for bar height (0-1) |
+
+### AudioWaveformAppearance
+
+Extends `WaveformAppearance` with playhead options.
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `playheadColor` | `string` | `"#ef4444"` | Color of the playhead line |
+| `playheadWidth` | `number` | `2` | Width of the playhead line |
+
+### ScrollbarAppearance
+
+Options for scrollbar in `LiveStreamingRecorder`.
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `thumbColor` | `string` | `"rgba(148, 163, 184, 0.5)"` | Scrollbar thumb color |
+| `hidden` | `boolean` | `false` | Hide scrollbar completely |
+
+---
+
+## Styling
+
+Components accept `className`, `style`, and all standard canvas HTML attributes.
+
+```tsx
+<AudioWaveform
+  blob={blob}
+  className="h-32 w-full rounded-lg bg-slate-900 p-4"
+  appearance={{
+    barColor: "#3b82f6",
+    barWidth: 2,
+    barGap: 1,
+    barRadius: 1,
+    playheadColor: "#ef4444",
+    playheadWidth: 2,
+  }}
+/>
+```
+
+---
+
+## License
+
+[CC0 1.0](./LICENSE) - Public Domain

package/dist/constants.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const DEFAULT_WAVEFORM_APPEARANCE = {
+  barColor: "#3b82f6",
+  barWidth: 1,
+  barGap: 1,
+  barRadius: 0,
+  barHeightScale: 0.95
+};
+const DEFAULT_PLAYHEAD_APPEARANCE = {
+  playheadColor: "#ef4444",
+  playheadWidth: 2
+};
+const DEFAULT_SCROLLBAR_APPEARANCE = {
+  thumbColor: "rgba(148, 163, 184, 0.5)",
+  hidden: false
+};
+exports.DEFAULT_PLAYHEAD_APPEARANCE = DEFAULT_PLAYHEAD_APPEARANCE;
+exports.DEFAULT_SCROLLBAR_APPEARANCE = DEFAULT_SCROLLBAR_APPEARANCE;
+exports.DEFAULT_WAVEFORM_APPEARANCE = DEFAULT_WAVEFORM_APPEARANCE;

package/dist/constants.js

@@ -0,0 +1,20 @@
+const DEFAULT_WAVEFORM_APPEARANCE = {
+  barColor: "#3b82f6",
+  barWidth: 1,
+  barGap: 1,
+  barRadius: 0,
+  barHeightScale: 0.95
+};
+const DEFAULT_PLAYHEAD_APPEARANCE = {
+  playheadColor: "#ef4444",
+  playheadWidth: 2
+};
+const DEFAULT_SCROLLBAR_APPEARANCE = {
+  thumbColor: "rgba(148, 163, 184, 0.5)",
+  hidden: false
+};
+export {
+  DEFAULT_PLAYHEAD_APPEARANCE,
+  DEFAULT_SCROLLBAR_APPEARANCE,
+  DEFAULT_WAVEFORM_APPEARANCE
+};

package/dist/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("./recorder/live-recorder/index.cjs");
+const recorderCompound = require("./recorder/live-streaming/recorder/recorder-compound.cjs");
+const stackRecorderCompound = require("./recorder/live-streaming/stack-recorder/stack-recorder-compound.cjs");
+const useAudioRecorder = require("./recorder/use-audio-recorder.cjs");
+const index$1 = require("./waveform/index.cjs");
+exports.LiveRecorder = index.LiveRecorder;
+exports.LiveStreamingRecorder = recorderCompound.LiveStreamingRecorder;
+exports.LiveStreamingStackRecorder = stackRecorderCompound.LiveStreamingStackRecorder;
+exports.useAudioRecorder = useAudioRecorder.useAudioRecorder;
+exports.AudioWaveform = index$1.AudioWaveform;

package/dist/index.d.ts

@@ -0,0 +1,235 @@
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+
+export declare const AudioWaveform: ForwardRefExoticComponent<AudioWaveformProps & RefAttributes<AudioWaveformRef>>;
+
+/**
+ * AudioWaveform-specific appearance configuration
+ * Extends WaveformAppearance with playhead styles
+ */
+export declare interface AudioWaveformAppearance extends WaveformAppearance {
+    /** Playhead color (CSS color value). Default: "#ef4444" (red-500) */
+    playheadColor?: string;
+    /** Playhead width (pixels). Default: 2 */
+    playheadWidth?: number;
+}
+
+declare interface AudioWaveformProps extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
+    /** Audio blob to visualize */
+    blob: Blob | null;
+    /** Waveform appearance configuration (barColor, barWidth, playheadColor, etc.) */
+    appearance?: AudioWaveformAppearance;
+    /** Enable Suspense mode (requires Suspense boundary in parent) */
+    suspense?: boolean;
+    /** Current playback time in seconds (shows playhead) */
+    currentTime?: number;
+    /** Total audio duration in seconds (required for playhead positioning) */
+    duration?: number;
+    /** Callback when user clicks/seeks on waveform */
+    onSeek?: (time: number) => void;
+}
+
+declare interface AudioWaveformRef {
+    canvas: HTMLCanvasElement | null;
+}
+
+/**
+ * 실시간 오디오 주파수 시각화 컴포넌트
+ * MediaRecorder의 오디오를 Web Audio API로 분석하여 바 형태로 렌더링
+ */
+export declare const LiveRecorder: ForwardRefExoticComponent<LiveRecorderProps & RefAttributes<LiveRecorderRef>>;
+
+declare interface LiveRecorderProps extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
+    /**
+     * MediaRecorder instance to visualize
+     */
+    mediaRecorder: MediaRecorder | null;
+    /**
+     * Waveform appearance configuration
+     */
+    appearance?: WaveformAppearance;
+    /**
+     * FFT size for frequency analysis (must be power of 2)
+     * @default 2048
+     */
+    fftSize?: number;
+    /**
+     * Smoothing time constant for analyser (0-1)
+     * @default 0.8
+     */
+    smoothingTimeConstant?: number;
+    /**
+     * Show minimal bars when not recording (idle state)
+     * @default true
+     */
+    showIdleState?: boolean;
+}
+
+declare interface LiveRecorderRef {
+    /** Get the canvas element */
+    getCanvas: () => HTMLCanvasElement | null;
+    /** Get the audio context */
+    getAudioContext: () => AudioContext | null;
+    /** Get the analyser node */
+    getAnalyser: () => AnalyserNode | null;
+}
+
+export declare const LiveStreamingRecorder: ForwardRefExoticComponent<LiveStreamingRecorderRootProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<LiveStreamingRecorderRootProps & RefAttributes<HTMLDivElement>>;
+    Canvas: ForwardRefExoticComponent<LiveStreamingRecorderCanvasProps & RefAttributes<HTMLCanvasElement>>;
+};
+
+/**
+ * LiveStreamingRecorder-specific appearance configuration
+ * Extends WaveformAppearance with scrollbar styles
+ */
+declare interface LiveStreamingRecorderAppearance extends WaveformAppearance {
+    /** Scrollbar appearance configuration */
+    scrollbar?: ScrollbarAppearance;
+}
+
+declare interface LiveStreamingRecorderCanvasProps extends HTMLAttributes<HTMLCanvasElement> {
+    /** Additional className for canvas element */
+    className?: string;
+    /** Inline styles for canvas element */
+    style?: React.CSSProperties;
+    /** Waveform appearance configuration (barColor, barWidth, etc.) - scrollbar 설정은 Root에서만 유효 */
+    appearance?: LiveStreamingRecorderAppearance;
+    /**
+     * Allow canvas width to grow beyond container (enables scrolling)
+     * - true: Canvas grows horizontally as recording continues (Voice Memos style)
+     * - false: Canvas stays fixed width, bars get compressed
+     * @default true
+     */
+    growWidth?: boolean;
+}
+
+declare type LiveStreamingRecorderContextValue = UseRecordingAmplitudesReturn;
+
+declare interface LiveStreamingRecorderRootProps extends UseRecordingAmplitudesOptions, Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children: ReactNode | ((value: ReturnType<typeof useLiveStreamingRecorderContext>) => ReactNode);
+    /** Appearance configuration (waveform + scrollbar styles) */
+    appearance?: LiveStreamingRecorderAppearance;
+}
+
+export declare const LiveStreamingStackRecorder: ForwardRefExoticComponent<LiveStreamingStackRecorderProps & RefAttributes<HTMLCanvasElement>>;
+
+declare interface LiveStreamingStackRecorderProps extends UseRecordingAmplitudesOptions, Omit<React.CanvasHTMLAttributes<HTMLCanvasElement>, "children"> {
+    /** Waveform appearance configuration (barColor, barWidth, etc.) */
+    appearance?: WaveformAppearance;
+}
+
+/**
+ * Scrollbar appearance configuration
+ * Used by LiveStreamingRecorder for custom scrollbar styling (OverlayScrollbars)
+ */
+export declare interface ScrollbarAppearance {
+    /** Scrollbar thumb/handle color (CSS color value). Default: "rgba(148, 163, 184, 0.5)" */
+    thumbColor?: string;
+    /** Hide scrollbar completely. Default: false */
+    hidden?: boolean;
+}
+
+/**
+ * Custom hook for audio recording with real-time visualization support
+ * Based on react-audio-visualize patterns
+ */
+export declare const useAudioRecorder: (config?: UseAudioRecorderConfig) => UseAudioRecorderReturn;
+
+declare interface UseAudioRecorderConfig {
+    /**
+     * MIME type for the recording
+     * - string: Directly specify MIME type (e.g., 'audio/webm', 'audio/mp4')
+     * - function: Select MIME type with custom logic (browser detection, etc.)
+     * - undefined: Auto-select by browser (Safari: audio/mp4, Others: audio/webm)
+     * @default getDefaultMimeType() - Auto-select by browser
+     */
+    mimeType?: string | (() => string);
+    /**
+     * Audio constraints for getUserMedia
+     * @default true
+     */
+    audioConstraints?: MediaTrackConstraints | boolean;
+    /**
+     * Callback when recording is complete
+     */
+    onRecordingComplete?: (blob: Blob) => void;
+}
+
+export declare interface UseAudioRecorderReturn {
+    /** Start recording from the microphone */
+    startRecording: () => Promise<void>;
+    /** Stop recording and generate the audio blob */
+    stopRecording: () => void;
+    /** Pause the current recording */
+    pauseRecording: () => void;
+    /** Resume a paused recording */
+    resumeRecording: () => void;
+    /** Clear the recording and reset state */
+    clearRecording: () => void;
+    /** The MediaRecorder instance (for visualization) */
+    mediaRecorder: MediaRecorder | null;
+    /** The recorded audio as a Blob (available after stopRecording) */
+    recordingBlob: Blob | null;
+    /** Recording duration in seconds */
+    recordingTime: number;
+    /** Whether currently recording */
+    isRecording: boolean;
+    /** Whether recording is paused */
+    isPaused: boolean;
+    /** Any error that occurred */
+    error: Error | null;
+}
+
+/**
+ * LiveStreamingRecorder Context hook
+ * Must be used within LiveStreamingRecorder.Root component
+ */
+declare function useLiveStreamingRecorderContext(): LiveStreamingRecorderContextValue;
+
+declare interface UseRecordingAmplitudesOptions {
+    /** MediaRecorder instance to sample from */
+    mediaRecorder: MediaRecorder | null;
+    /** FFT size for frequency analysis (must be power of 2) */
+    fftSize?: number;
+    /** Smoothing time constant for analyser (0-1) */
+    smoothingTimeConstant?: number;
+    /** Interval in ms for sampling amplitude data */
+    sampleInterval?: number;
+}
+
+declare interface UseRecordingAmplitudesReturn {
+    /** Array of amplitude values (0-1 range) sampled over time */
+    amplitudes: number[];
+    /** Audio context instance */
+    audioContext: AudioContext | null;
+    /** Analyser node instance */
+    analyser: AnalyserNode | null;
+    /** Whether recording is active */
+    isRecording: boolean;
+    /** Whether recording is paused */
+    isPaused: boolean;
+    /** Clear all amplitude data */
+    clearAmplitudes: () => void;
+}
+
+/**
+ * Base waveform appearance configuration
+ * Used by all waveform components
+ */
+export declare interface WaveformAppearance {
+    /** Bar color (CSS color value). Default: "#3b82f6" (blue-500) */
+    barColor?: string;
+    /** Bar width (pixels). Default: 3 */
+    barWidth?: number;
+    /** Bar gap (pixels). Default: 1 */
+    barGap?: number;
+    /** Bar corner radius (pixels). Default: 1.5 */
+    barRadius?: number;
+    /** Bar height scale (0.0 - 1.0). Default: 0.95 (5% top/bottom margin) */
+    barHeightScale?: number;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,12 @@
+import { LiveRecorder } from "./recorder/live-recorder/index.js";
+import { LiveStreamingRecorder } from "./recorder/live-streaming/recorder/recorder-compound.js";
+import { LiveStreamingStackRecorder } from "./recorder/live-streaming/stack-recorder/stack-recorder-compound.js";
+import { useAudioRecorder } from "./recorder/use-audio-recorder.js";
+import { AudioWaveform } from "./waveform/index.js";
+export {
+  AudioWaveform,
+  LiveRecorder,
+  LiveStreamingRecorder,
+  LiveStreamingStackRecorder,
+  useAudioRecorder
+};