sceyt-chat-react-uikit 1.8.0-beta.5 → 1.8.0-beta.6

package/index.js

@@ -32188,15 +32188,16 @@ class EventEmitter {
         if (!this.listeners[event]) {
             this.listeners[event] = new Set();
         }
-        this.listeners[event].add(listener);
         if (options === null || options === void 0 ? void 0 : options.once) {
-            const unsubscribeOnce = () => {
-                this.un(event, unsubscribeOnce);
-                this.un(event, listener);
+            // Create a wrapper that removes itself after being called once
+            const onceWrapper = (...args) => {
+                this.un(event, onceWrapper);
+                listener(...args);
             };
-            this.on(event, unsubscribeOnce);
-            return unsubscribeOnce;
+            this.listeners[event].add(onceWrapper);
+            return () => this.un(event, onceWrapper);
         }
+        this.listeners[event].add(listener);
         return () => this.un(event, listener);
     }
     /** Unsubscribe from an event */
@@ -32266,8 +32267,13 @@ var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _argume
 function decode(audioData, sampleRate) {
     return __awaiter(this, void 0, void 0, function* () {
         const audioCtx = new AudioContext({ sampleRate });
-        const decode = audioCtx.decodeAudioData(audioData);
-        return decode.finally(() => audioCtx.close());
+        try {
+            return yield audioCtx.decodeAudioData(audioData);
+        }
+        finally {
+            // Ensure AudioContext is always closed, even on synchronous errors
+            audioCtx.close();
+        }
     });
 }
 /** Normalize peaks to -1..1 */
@@ -32291,17 +32297,36 @@ function normalize(channelData) {
 }
 /** Create an audio buffer from pre-decoded audio data */
 function createBuffer(channelData, duration) {
+    // Validate inputs
+    if (!channelData || channelData.length === 0) {
+        throw new Error('channelData must be a non-empty array');
+    }
+    if (duration <= 0) {
+        throw new Error('duration must be greater than 0');
+    }
     // If a single array of numbers is passed, make it an array of arrays
     if (typeof channelData[0] === 'number')
         channelData = [channelData];
+    // Validate channel data after conversion
+    if (!channelData[0] || channelData[0].length === 0) {
+        throw new Error('channelData must contain non-empty channel arrays');
+    }
     // Normalize to -1..1
     normalize(channelData);
+    // Convert to Float32Array for consistency
+    const float32Channels = channelData.map((channel) => channel instanceof Float32Array ? channel : Float32Array.from(channel));
     return {
         duration,
-        length: channelData[0].length,
-        sampleRate: channelData[0].length / duration,
-        numberOfChannels: channelData.length,
-        getChannelData: (i) => channelData === null || channelData === void 0 ? void 0 : channelData[i],
+        length: float32Channels[0].length,
+        sampleRate: float32Channels[0].length / duration,
+        numberOfChannels: float32Channels.length,
+        getChannelData: (i) => {
+            const channel = float32Channels[i];
+            if (!channel) {
+                throw new Error(`Channel ${i} not found`);
+            }
+            return channel;
+        },
         copyFromChannel: AudioBuffer.prototype.copyFromChannel,
         copyToChannel: AudioBuffer.prototype.copyToChannel,
     };
@@ -32370,28 +32395,26 @@ function watchProgress(response, progressCallback) {
         const contentLength = Number(response.headers.get('Content-Length')) || 0;
         let receivedLength = 0;
         // Process the data
-        const processChunk = (value) => __awaiter$1(this, void 0, void 0, function* () {
+        const processChunk = (value) => {
             // Add to the received length
             receivedLength += (value === null || value === void 0 ? void 0 : value.length) || 0;
             const percentage = Math.round((receivedLength / contentLength) * 100);
             progressCallback(percentage);
-        });
-        const read = () => __awaiter$1(this, void 0, void 0, function* () {
-            let data;
-            try {
-                data = yield reader.read();
-            }
-            catch (_a) {
-                // Ignore errors because we can only handle the main response
-                return;
-            }
-            // Continue reading data until done
-            if (!data.done) {
+        };
+        // Use iteration instead of recursion to avoid stack issues
+        try {
+            while (true) {
+                const data = yield reader.read();
+                if (data.done) {
+                    break;
+                }
                 processChunk(data.value);
-                yield read();
             }
-        });
-        read();
+        }
+        catch (err) {
+            // Ignore errors because we can only handle the main response
+            console.warn('Progress tracking error:', err);
+        }
     });
 }
 function fetchBlob(url, progressCallback, requestInit) {
@@ -32410,6 +32433,121 @@ const Fetcher = {
     fetchBlob,
 };
 
+/**
+ * Reactive primitives for managing state in WaveSurfer
+ *
+ * This module provides signal-based reactivity similar to SolidJS signals.
+ * Signals are reactive values that notify subscribers when they change.
+ */
+/**
+ * Create a reactive signal that notifies subscribers when its value changes
+ *
+ * @example
+ * ```typescript
+ * const count = signal(0)
+ * count.subscribe(val => console.log('Count:', val))
+ * count.set(5) // Logs: Count: 5
+ * ```
+ */
+function signal(initialValue) {
+    let _value = initialValue;
+    const subscribers = new Set();
+    return {
+        get value() {
+            return _value;
+        },
+        set(newValue) {
+            // Only update and notify if value actually changed
+            if (!Object.is(_value, newValue)) {
+                _value = newValue;
+                subscribers.forEach((fn) => fn(_value));
+            }
+        },
+        update(fn) {
+            this.set(fn(_value));
+        },
+        subscribe(callback) {
+            subscribers.add(callback);
+            return () => subscribers.delete(callback);
+        },
+    };
+}
+/**
+ * Create a computed value that automatically updates when its dependencies change
+ *
+ * @example
+ * ```typescript
+ * const count = signal(0)
+ * const doubled = computed(() => count.value * 2, [count])
+ * console.log(doubled.value) // 0
+ * count.set(5)
+ * console.log(doubled.value) // 10
+ * ```
+ */
+function computed(fn, dependencies) {
+    const result = signal(fn());
+    // Subscribe to all dependencies immediately
+    // This ensures the computed value stays in sync even if no one is subscribed to it
+    dependencies.forEach((dep) => dep.subscribe(() => {
+        const newValue = fn();
+        // Update the result signal, which will notify our subscribers if value changed
+        if (!Object.is(result.value, newValue)) {
+            result.set(newValue);
+        }
+    }));
+    // Return a read-only signal that proxies the result
+    return {
+        get value() {
+            return result.value;
+        },
+        subscribe(callback) {
+            // Just subscribe to result changes
+            return result.subscribe(callback);
+        },
+    };
+}
+/**
+ * Run a side effect automatically when dependencies change
+ *
+ * @param fn - Effect function. Can return a cleanup function.
+ * @param dependencies - Signals that trigger the effect when they change
+ * @returns Unsubscribe function that stops the effect and runs cleanup
+ *
+ * @example
+ * ```typescript
+ * const count = signal(0)
+ * effect(() => {
+ *   console.log('Count is:', count.value)
+ *   return () => console.log('Cleanup')
+ * }, [count])
+ * count.set(5) // Logs: Cleanup, Count is: 5
+ * ```
+ */
+function effect(fn, dependencies) {
+    let cleanup;
+    const run = () => {
+        // Run cleanup from previous execution
+        if (cleanup) {
+            cleanup();
+            cleanup = undefined;
+        }
+        // Run effect and capture new cleanup
+        cleanup = fn();
+    };
+    // Subscribe to all dependencies
+    const unsubscribes = dependencies.map((dep) => dep.subscribe(run));
+    // Run effect immediately
+    run();
+    // Return function that unsubscribes and runs cleanup
+    return () => {
+        if (cleanup) {
+            cleanup();
+            cleanup = undefined;
+        }
+        unsubscribes.forEach((unsub) => unsub());
+    };
+}
+
 var __awaiter$2 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -32420,9 +32558,33 @@ var __awaiter$2 = (undefined && undefined.__awaiter) || function (thisArg, _argu
     });
 };
 class Player extends EventEmitter {
+    // Expose reactive state as writable signals
+    // These are writable to allow WaveSurfer to compose them into centralized state
+    get isPlayingSignal() {
+        return this._isPlaying;
+    }
+    get currentTimeSignal() {
+        return this._currentTime;
+    }
+    get durationSignal() {
+        return this._duration;
+    }
+    get volumeSignal() {
+        return this._volume;
+    }
+    get mutedSignal() {
+        return this._muted;
+    }
+    get playbackRateSignal() {
+        return this._playbackRate;
+    }
+    get seekingSignal() {
+        return this._seeking;
+    }
     constructor(options) {
         super();
         this.isExternalMedia = false;
+        this.reactiveMediaEventCleanups = [];
         if (options.media) {
             this.media = options.media;
             this.isExternalMedia = true;
@@ -32430,6 +32592,16 @@ class Player extends EventEmitter {
         else {
             this.media = document.createElement('audio');
         }
+        // Initialize reactive state
+        this._isPlaying = signal(false);
+        this._currentTime = signal(0);
+        this._duration = signal(0);
+        this._volume = signal(this.media.volume);
+        this._muted = signal(this.media.muted);
+        this._playbackRate = signal(this.media.playbackRate || 1);
+        this._seeking = signal(false);
+        // Setup reactive media event handlers
+        this.setupReactiveMediaEvents();
         // Controls
         if (options.mediaControls) {
             this.media.controls = true;
@@ -32447,6 +32619,48 @@ class Player extends EventEmitter {
             }, { once: true });
         }
     }
+    /**
+     * Setup reactive media event handlers that update signals
+     * This bridges the imperative HTMLMediaElement API to reactive state
+     */
+    setupReactiveMediaEvents() {
+        // Playing state
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('play', () => {
+            this._isPlaying.set(true);
+        }));
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('pause', () => {
+            this._isPlaying.set(false);
+        }));
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('ended', () => {
+            this._isPlaying.set(false);
+        }));
+        // Time tracking
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('timeupdate', () => {
+            this._currentTime.set(this.media.currentTime);
+        }));
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('durationchange', () => {
+            this._duration.set(this.media.duration || 0);
+        }));
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('loadedmetadata', () => {
+            this._duration.set(this.media.duration || 0);
+        }));
+        // Seeking state
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('seeking', () => {
+            this._seeking.set(true);
+        }));
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('seeked', () => {
+            this._seeking.set(false);
+        }));
+        // Volume and muted
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('volumechange', () => {
+            this._volume.set(this.media.volume);
+            this._muted.set(this.media.muted);
+        }));
+        // Playback rate
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('ratechange', () => {
+            this._playbackRate.set(this.media.playbackRate);
+        }));
+    }
     onMediaEvent(event, callback, options) {
         this.media.addEventListener(event, callback, options);
         return () => this.media.removeEventListener(event, callback, options);
@@ -32483,17 +32697,27 @@ class Player extends EventEmitter {
         }
     }
     destroy() {
+        // Cleanup reactive media event listeners
+        this.reactiveMediaEventCleanups.forEach((cleanup) => cleanup());
+        this.reactiveMediaEventCleanups = [];
         if (this.isExternalMedia)
             return;
         this.media.pause();
-        this.media.remove();
         this.revokeSrc();
         this.media.removeAttribute('src');
         // Load resets the media element to its initial state
         this.media.load();
+        // Remove from DOM after cleanup
+        this.media.remove();
     }
     setMediaElement(element) {
+        // Cleanup reactive event listeners from old media element
+        this.reactiveMediaEventCleanups.forEach((cleanup) => cleanup());
+        this.reactiveMediaEventCleanups = [];
+        // Set new media element
         this.media = element;
+        // Reinitialize reactive event listeners on new media element
+        this.setupReactiveMediaEvents();
     }
     /** Start playing the audio */
     play() {
@@ -32573,23 +32797,312 @@ class Player extends EventEmitter {
     }
 }
 
-function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mouseButton = 0, touchDelay = 100) {
-    if (!element)
-        return () => void 0;
+const DEFAULT_HEIGHT = 128;
+const MAX_CANVAS_WIDTH = 8000;
+const MAX_NODES = 10;
+function clampToUnit(value) {
+    if (value < 0)
+        return 0;
+    if (value > 1)
+        return 1;
+    return value;
+}
+function calculateBarRenderConfig({ width, height, length, options, pixelRatio, }) {
+    const halfHeight = height / 2;
+    const barWidth = options.barWidth ? options.barWidth * pixelRatio : 1;
+    const barGap = options.barGap ? options.barGap * pixelRatio : options.barWidth ? barWidth / 2 : 0;
+    const barRadius = options.barRadius || 0;
+    const barMinHeight = options.barMinHeight ? options.barMinHeight * pixelRatio : 0;
+    const spacing = barWidth + barGap || 1;
+    const barIndexScale = length > 0 ? width / spacing / length : 0;
+    return {
+        halfHeight,
+        barWidth,
+        barGap,
+        barRadius,
+        barMinHeight,
+        barIndexScale,
+        barSpacing: spacing,
+    };
+}
+function calculateBarHeights({ maxTop, maxBottom, halfHeight, vScale, barMinHeight = 0, barAlign, }) {
+    let topHeight = Math.round(maxTop * halfHeight * vScale);
+    const bottomHeight = Math.round(maxBottom * halfHeight * vScale);
+    let totalHeight = topHeight + bottomHeight || 1;
+    if (totalHeight < barMinHeight) {
+        totalHeight = barMinHeight;
+        if (!barAlign) {
+            topHeight = totalHeight / 2;
+        }
+    }
+    return { topHeight, totalHeight };
+}
+function resolveBarYPosition({ barAlign, halfHeight, topHeight, totalHeight, canvasHeight, }) {
+    if (barAlign === 'top')
+        return 0;
+    if (barAlign === 'bottom')
+        return canvasHeight - totalHeight;
+    return halfHeight - topHeight;
+}
+function calculateBarSegments({ channelData, barIndexScale, barSpacing, barWidth, halfHeight, vScale, canvasHeight, barAlign, barMinHeight, }) {
+    const topChannel = channelData[0] || [];
+    const bottomChannel = channelData[1] || topChannel;
+    const length = topChannel.length;
+    const segments = [];
+    let prevX = 0;
+    let maxTop = 0;
+    let maxBottom = 0;
+    for (let i = 0; i <= length; i++) {
+        const x = Math.round(i * barIndexScale);
+        if (x > prevX) {
+            const { topHeight, totalHeight } = calculateBarHeights({
+                maxTop,
+                maxBottom,
+                halfHeight,
+                vScale,
+                barMinHeight,
+                barAlign,
+            });
+            const y = resolveBarYPosition({
+                barAlign,
+                halfHeight,
+                topHeight,
+                totalHeight,
+                canvasHeight,
+            });
+            segments.push({
+                x: prevX * barSpacing,
+                y,
+                width: barWidth,
+                height: totalHeight,
+            });
+            prevX = x;
+            maxTop = 0;
+            maxBottom = 0;
+        }
+        const magnitudeTop = Math.abs(topChannel[i] || 0);
+        const magnitudeBottom = Math.abs(bottomChannel[i] || 0);
+        if (magnitudeTop > maxTop)
+            maxTop = magnitudeTop;
+        if (magnitudeBottom > maxBottom)
+            maxBottom = magnitudeBottom;
+    }
+    return segments;
+}
+function getRelativePointerPosition(rect, clientX, clientY) {
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
+    const relativeX = x / rect.width;
+    const relativeY = y / rect.height;
+    return [relativeX, relativeY];
+}
+function resolveChannelHeight({ optionsHeight, optionsSplitChannels, parentHeight, numberOfChannels, defaultHeight = DEFAULT_HEIGHT, }) {
+    if (optionsHeight == null)
+        return defaultHeight;
+    const numericHeight = Number(optionsHeight);
+    if (!isNaN(numericHeight))
+        return numericHeight;
+    if (optionsHeight === 'auto') {
+        const height = parentHeight || defaultHeight;
+        if (optionsSplitChannels === null || optionsSplitChannels === void 0 ? void 0 : optionsSplitChannels.every((channel) => !channel.overlay)) {
+            return height / numberOfChannels;
+        }
+        return height;
+    }
+    return defaultHeight;
+}
+function getPixelRatio(devicePixelRatio) {
+    return Math.max(1, devicePixelRatio || 1);
+}
+function shouldRenderBars(options) {
+    return Boolean(options.barWidth || options.barGap || options.barAlign);
+}
+function resolveColorValue(color, devicePixelRatio, canvasHeight) {
+    if (!Array.isArray(color))
+        return color || '';
+    if (color.length === 0)
+        return '#999';
+    if (color.length < 2)
+        return color[0] || '';
+    const canvasElement = document.createElement('canvas');
+    const ctx = canvasElement.getContext('2d');
+    const gradientHeight = canvasHeight !== null && canvasHeight !== void 0 ? canvasHeight : canvasElement.height * devicePixelRatio;
+    const gradient = ctx.createLinearGradient(0, 0, 0, gradientHeight || devicePixelRatio);
+    const colorStopPercentage = 1 / (color.length - 1);
+    color.forEach((value, index) => {
+        gradient.addColorStop(index * colorStopPercentage, value);
+    });
+    return gradient;
+}
+function calculateWaveformLayout({ duration, minPxPerSec = 0, parentWidth, fillParent, pixelRatio, }) {
+    const scrollWidth = Math.ceil(duration * minPxPerSec);
+    const isScrollable = scrollWidth > parentWidth;
+    const useParentWidth = Boolean(fillParent && !isScrollable);
+    const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;
+    return {
+        scrollWidth,
+        isScrollable,
+        useParentWidth,
+        width,
+    };
+}
+function clampWidthToBarGrid(width, options) {
+    if (!shouldRenderBars(options))
+        return width;
+    const barWidth = options.barWidth || 0.5;
+    const barGap = options.barGap || barWidth / 2;
+    const totalBarWidth = barWidth + barGap;
+    if (totalBarWidth === 0)
+        return width;
+    return Math.floor(width / totalBarWidth) * totalBarWidth;
+}
+function calculateSingleCanvasWidth({ clientWidth, totalWidth, options, }) {
+    const baseWidth = Math.min(MAX_CANVAS_WIDTH, clientWidth, totalWidth);
+    return clampWidthToBarGrid(baseWidth, options);
+}
+function sliceChannelData({ channelData, offset, clampedWidth, totalWidth, }) {
+    return channelData.map((channel) => {
+        const start = Math.floor((offset / totalWidth) * channel.length);
+        const end = Math.floor(((offset + clampedWidth) / totalWidth) * channel.length);
+        return channel.slice(start, end);
+    });
+}
+function shouldClearCanvases(currentNodeCount) {
+    return currentNodeCount > MAX_NODES;
+}
+function getLazyRenderRange({ scrollLeft, totalWidth, numCanvases, }) {
+    if (totalWidth === 0)
+        return [0];
+    const viewPosition = scrollLeft / totalWidth;
+    const startCanvas = Math.floor(viewPosition * numCanvases);
+    return [startCanvas - 1, startCanvas, startCanvas + 1];
+}
+function calculateVerticalScale({ channelData, barHeight, normalize, maxPeak, }) {
+    var _a;
+    const baseScale = barHeight || 1;
+    if (!normalize)
+        return baseScale;
+    const firstChannel = channelData[0];
+    if (!firstChannel || firstChannel.length === 0)
+        return baseScale;
+    // Use fixed max peak if provided, otherwise calculate from data
+    let max = maxPeak !== null && maxPeak !== void 0 ? maxPeak : 0;
+    if (!maxPeak) {
+        for (let i = 0; i < firstChannel.length; i++) {
+            const value = (_a = firstChannel[i]) !== null && _a !== void 0 ? _a : 0;
+            const magnitude = Math.abs(value);
+            if (magnitude > max)
+                max = magnitude;
+        }
+    }
+    if (!max)
+        return baseScale;
+    return baseScale / max;
+}
+function calculateLinePaths({ channelData, width, height, vScale, }) {
+    const halfHeight = height / 2;
+    const primaryChannel = channelData[0] || [];
+    const secondaryChannel = channelData[1] || primaryChannel;
+    const channels = [primaryChannel, secondaryChannel];
+    return channels.map((channel, index) => {
+        const length = channel.length;
+        const hScale = length ? width / length : 0;
+        const baseY = halfHeight;
+        const direction = index === 0 ? -1 : 1;
+        const path = [{ x: 0, y: baseY }];
+        let prevX = 0;
+        let max = 0;
+        for (let i = 0; i <= length; i++) {
+            const x = Math.round(i * hScale);
+            if (x > prevX) {
+                const heightDelta = Math.round(max * halfHeight * vScale) || 1;
+                const y = baseY + heightDelta * direction;
+                path.push({ x: prevX, y });
+                prevX = x;
+                max = 0;
+            }
+            const value = Math.abs(channel[i] || 0);
+            if (value > max)
+                max = value;
+        }
+        path.push({ x: prevX, y: baseY });
+        return path;
+    });
+}
+function roundToHalfAwayFromZero(value) {
+    const scaled = value * 2;
+    const rounded = scaled < 0 ? Math.floor(scaled) : Math.ceil(scaled);
+    return rounded / 2;
+}
+
+/**
+ * Event stream utilities for converting DOM events to reactive signals
+ *
+ * These utilities allow composing event handling using reactive primitives.
+ */
+/**
+ * Cleanup a stream created with event stream utilities
+ *
+ * This removes event listeners and unsubscribes from sources.
+ */
+function cleanup(stream) {
+    const cleanupFn = stream._cleanup;
+    if (typeof cleanupFn === 'function') {
+        cleanupFn();
+    }
+}
+
+/**
+ * Reactive drag stream utilities
+ *
+ * Provides declarative drag handling using reactive streams.
+ * Automatically handles mouseup cleanup and supports constraints.
+ */
+/**
+ * Create a reactive drag stream from an element
+ *
+ * Emits drag events (start, move, end) as the user drags the element.
+ * Automatically handles pointer capture, multi-touch prevention, and cleanup.
+ *
+ * @example
+ * ```typescript
+ * const dragSignal = createDragStream(element)
+ *
+ * effect(() => {
+ *   const drag = dragSignal.value
+ *   if (drag?.type === 'move') {
+ *     console.log('Dragging:', drag.deltaX, drag.deltaY)
+ *   }
+ * }, [dragSignal])
+ * ```
+ *
+ * @param element - Element to make draggable
+ * @param options - Drag configuration options
+ * @returns Signal emitting drag events and cleanup function
+ */
+function createDragStream(element, options = {}) {
+    const { threshold = 3, mouseButton = 0, touchDelay = 100 } = options;
+    const dragSignal = signal(null);
+    const activePointers = new Map();
     const isTouchDevice = matchMedia('(pointer: coarse)').matches;
     let unsubscribeDocument = () => void 0;
     const onPointerDown = (event) => {
         if (event.button !== mouseButton)
             return;
-        event.preventDefault();
-        event.stopPropagation();
+        activePointers.set(event.pointerId, event);
+        if (activePointers.size > 1) {
+            return;
+        }
         let startX = event.clientX;
         let startY = event.clientY;
         let isDragging = false;
         const touchStartTime = Date.now();
+        const rect = element.getBoundingClientRect();
+        const { left, top } = rect;
         const onPointerMove = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
+            if (event.defaultPrevented || activePointers.size > 1) {
+                return;
+            }
             if (isTouchDevice && Date.now() - touchStartTime < touchDelay)
                 return;
             const x = event.clientX;
@@ -32597,29 +33110,45 @@ function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mouseButt
             const dx = x - startX;
             const dy = y - startY;
             if (isDragging || Math.abs(dx) > threshold || Math.abs(dy) > threshold) {
-                const rect = element.getBoundingClientRect();
-                const { left, top } = rect;
+                event.preventDefault();
+                event.stopPropagation();
                 if (!isDragging) {
-                    onStart === null || onStart === void 0 ? void 0 : onStart(startX - left, startY - top);
+                    // Emit start event
+                    dragSignal.set({
+                        type: 'start',
+                        x: startX - left,
+                        y: startY - top,
+                    });
                     isDragging = true;
                 }
-                onDrag(dx, dy, x - left, y - top);
+                // Emit move event
+                dragSignal.set({
+                    type: 'move',
+                    x: x - left,
+                    y: y - top,
+                    deltaX: dx,
+                    deltaY: dy,
+                });
                 startX = x;
                 startY = y;
             }
         };
         const onPointerUp = (event) => {
+            activePointers.delete(event.pointerId);
             if (isDragging) {
                 const x = event.clientX;
                 const y = event.clientY;
-                const rect = element.getBoundingClientRect();
-                const { left, top } = rect;
-                onEnd === null || onEnd === void 0 ? void 0 : onEnd(x - left, y - top);
+                // Emit end event
+                dragSignal.set({
+                    type: 'end',
+                    x: x - left,
+                    y: y - top,
+                });
             }
             unsubscribeDocument();
         };
         const onPointerLeave = (e) => {
-            // Listen to events only on the document and not on inner elements
+            activePointers.delete(e.pointerId);
             if (!e.relatedTarget || e.relatedTarget === document.documentElement) {
                 onPointerUp(e);
             }
@@ -32631,6 +33160,9 @@ function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mouseButt
             }
         };
         const onTouchMove = (event) => {
+            if (event.defaultPrevented || activePointers.size > 1) {
+                return;
+            }
             if (isDragging) {
                 event.preventDefault();
             }
@@ -32653,9 +33185,114 @@ function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mouseButt
         };
     };
     element.addEventListener('pointerdown', onPointerDown);
-    return () => {
+    const cleanupFn = () => {
         unsubscribeDocument();
         element.removeEventListener('pointerdown', onPointerDown);
+        activePointers.clear();
+        cleanup(dragSignal);
+    };
+    return {
+        signal: dragSignal,
+        cleanup: cleanupFn,
+    };
+}
+
+/**
+ * Reactive scroll stream utilities
+ *
+ * Provides declarative scroll handling using reactive streams.
+ * Automatically handles scroll event optimization and cleanup.
+ */
+// ============================================================================
+// Pure Scroll Calculation Functions
+// ============================================================================
+/**
+ * Calculate visible percentages from scroll data
+ * Pure function - no side effects
+ *
+ * @param scrollData - Current scroll dimensions
+ * @returns Start and end positions as percentages (0-1)
+ */
+function calculateScrollPercentages(scrollData) {
+    const { scrollLeft, scrollWidth, clientWidth } = scrollData;
+    if (scrollWidth === 0) {
+        return { startX: 0, endX: 1 };
+    }
+    const startX = scrollLeft / scrollWidth;
+    const endX = (scrollLeft + clientWidth) / scrollWidth;
+    return {
+        startX: Math.max(0, Math.min(1, startX)),
+        endX: Math.max(0, Math.min(1, endX)),
+    };
+}
+/**
+ * Calculate scroll bounds in pixels
+ * Pure function - no side effects
+ *
+ * @param scrollData - Current scroll dimensions
+ * @returns Left and right scroll bounds in pixels
+ */
+function calculateScrollBounds(scrollData) {
+    return {
+        left: scrollData.scrollLeft,
+        right: scrollData.scrollLeft + scrollData.clientWidth,
+    };
+}
+/**
+ * Create a reactive scroll stream from an element
+ *
+ * Emits scroll data as the user scrolls the element.
+ * Automatically computes derived values (percentages, bounds).
+ *
+ * @example
+ * ```typescript
+ * const scrollStream = createScrollStream(container)
+ *
+ * effect(() => {
+ *   const { startX, endX } = scrollStream.percentages.value
+ *   console.log('Visible:', startX, 'to', endX)
+ * }, [scrollStream.percentages])
+ *
+ * scrollStream.cleanup()
+ * ```
+ *
+ * @param element - Scrollable element
+ * @returns Scroll stream with signals and cleanup
+ */
+function createScrollStream(element) {
+    // Create signals
+    const scrollData = signal({
+        scrollLeft: element.scrollLeft,
+        scrollWidth: element.scrollWidth,
+        clientWidth: element.clientWidth,
+    });
+    // Computed derived values
+    const percentages = computed(() => {
+        return calculateScrollPercentages(scrollData.value);
+    }, [scrollData]);
+    const bounds = computed(() => {
+        return calculateScrollBounds(scrollData.value);
+    }, [scrollData]);
+    // Update scroll data on scroll event
+    const onScroll = () => {
+        scrollData.set({
+            scrollLeft: element.scrollLeft,
+            scrollWidth: element.scrollWidth,
+            clientWidth: element.clientWidth,
+        });
+    };
+    // Attach scroll listener
+    element.addEventListener('scroll', onScroll, { passive: true });
+    // Cleanup function
+    const cleanupFn = () => {
+        element.removeEventListener('scroll', onScroll);
+        cleanup(scrollData);
+    };
+    return {
+        scrollData,
+        percentages,
+        bounds,
+        cleanup: cleanupFn,
     };
 }
 
@@ -32690,6 +33327,8 @@ class Renderer extends EventEmitter {
         this.isDragging = false;
         this.subscriptions = [];
         this.unsubscribeOnScroll = [];
+        this.dragStream = null;
+        this.scrollStream = null;
         this.subscriptions = [];
         this.options = options;
         const parent = this.parentFromOptionsContainer(options.container);
@@ -32721,35 +33360,30 @@ class Renderer extends EventEmitter {
         return parent;
     }
     initEvents() {
-        const getClickPosition = (e) => {
-            const rect = this.wrapper.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
-            const relativeX = x / rect.width;
-            const relativeY = y / rect.height;
-            return [relativeX, relativeY];
-        };
         // Add a click listener
         this.wrapper.addEventListener('click', (e) => {
-            const [x, y] = getClickPosition(e);
+            const rect = this.wrapper.getBoundingClientRect();
+            const [x, y] = getRelativePointerPosition(rect, e.clientX, e.clientY);
             this.emit('click', x, y);
         });
         // Add a double click listener
         this.wrapper.addEventListener('dblclick', (e) => {
-            const [x, y] = getClickPosition(e);
+            const rect = this.wrapper.getBoundingClientRect();
+            const [x, y] = getRelativePointerPosition(rect, e.clientX, e.clientY);
             this.emit('dblclick', x, y);
         });
         // Drag
         if (this.options.dragToSeek === true || typeof this.options.dragToSeek === 'object') {
             this.initDrag();
         }
-        // Add a scroll listener
-        this.scrollContainer.addEventListener('scroll', () => {
-            const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
-            const startX = scrollLeft / scrollWidth;
-            const endX = (scrollLeft + clientWidth) / scrollWidth;
-            this.emit('scroll', startX, endX, scrollLeft, scrollLeft + clientWidth);
-        });
+        // Add a scroll listener using reactive stream
+        this.scrollStream = createScrollStream(this.scrollContainer);
+        const unsubscribeScroll = effect(() => {
+            const { startX, endX } = this.scrollStream.percentages.value;
+            const { left, right } = this.scrollStream.bounds.value;
+            this.emit('scroll', startX, endX, left, right);
+        }, [this.scrollStream.percentages, this.scrollStream.bounds]);
+        this.subscriptions.push(unsubscribeScroll);
         // Re-render the waveform on container resize
         if (typeof ResizeObserver === 'function') {
             const delay = this.createDelay(100);
@@ -32767,39 +33401,32 @@ class Renderer extends EventEmitter {
             return;
         this.lastContainerWidth = width;
         this.reRender();
+        this.emit('resize');
     }
     initDrag() {
-        this.subscriptions.push(makeDraggable(this.wrapper, 
-        // On drag
-        (_, __, x) => {
-            this.emit('drag', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
-        }, 
-        // On start drag
-        (x) => {
-            this.isDragging = true;
-            this.emit('dragstart', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
-        }, 
-        // On end drag
-        (x) => {
-            this.isDragging = false;
-            this.emit('dragend', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
-        }));
-    }
-    getHeight(optionsHeight, optionsSplitChannel) {
-        var _a;
-        const defaultHeight = 128;
-        const numberOfChannels = ((_a = this.audioData) === null || _a === void 0 ? void 0 : _a.numberOfChannels) || 1;
-        if (optionsHeight == null)
-            return defaultHeight;
-        if (!isNaN(Number(optionsHeight)))
-            return Number(optionsHeight);
-        if (optionsHeight === 'auto') {
-            const height = this.parent.clientHeight || defaultHeight;
-            if (optionsSplitChannel === null || optionsSplitChannel === void 0 ? void 0 : optionsSplitChannel.every((channel) => !channel.overlay))
-                return height / numberOfChannels;
-            return height;
-        }
-        return defaultHeight;
+        // Don't initialize drag if it's already set up
+        if (this.dragStream)
+            return;
+        this.dragStream = createDragStream(this.wrapper);
+        const unsubscribeDrag = effect(() => {
+            const drag = this.dragStream.signal.value;
+            if (!drag)
+                return;
+            const width = this.wrapper.getBoundingClientRect().width;
+            const relX = clampToUnit(drag.x / width);
+            if (drag.type === 'start') {
+                this.isDragging = true;
+                this.emit('dragstart', relX);
+            }
+            else if (drag.type === 'move') {
+                this.emit('drag', relX);
+            }
+            else if (drag.type === 'end') {
+                this.isDragging = false;
+                this.emit('dragend', relX);
+            }
+        }, [this.dragStream.signal]);
+        this.subscriptions.push(unsubscribeDrag);
     }
     initHtml() {
         const div = document.createElement('div');
@@ -32836,6 +33463,7 @@ class Renderer extends EventEmitter {
         }
         :host .canvases {
           min-height: ${this.getHeight(this.options.height, this.options.splitChannels)}px;
+          pointer-events: none;
         }
         :host .canvases > div {
           position: relative;
@@ -32912,150 +33540,134 @@ class Renderer extends EventEmitter {
         this.setScroll(scrollStart);
     }
     destroy() {
-        var _a, _b;
+        var _a;
         this.subscriptions.forEach((unsubscribe) => unsubscribe());
         this.container.remove();
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        (_b = this.unsubscribeOnScroll) === null || _b === void 0 ? void 0 : _b.forEach((unsubscribe) => unsubscribe());
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        (_a = this.unsubscribeOnScroll) === null || _a === void 0 ? void 0 : _a.forEach((unsubscribe) => unsubscribe());
         this.unsubscribeOnScroll = [];
+        if (this.dragStream) {
+            this.dragStream.cleanup();
+            this.dragStream = null;
+        }
+        if (this.scrollStream) {
+            this.scrollStream.cleanup();
+            this.scrollStream = null;
+        }
     }
     createDelay(delayMs = 10) {
         let timeout;
-        let reject;
+        let rejectFn;
         const onClear = () => {
-            if (timeout)
+            if (timeout) {
                 clearTimeout(timeout);
-            if (reject)
-                reject();
+                timeout = undefined;
+            }
+            if (rejectFn) {
+                rejectFn();
+                rejectFn = undefined;
+            }
         };
         this.timeouts.push(onClear);
         return () => {
-            return new Promise((resolveFn, rejectFn) => {
+            return new Promise((resolve, reject) => {
+                // Clear any pending delay
                 onClear();
-                reject = rejectFn;
+                // Store reject function for cleanup
+                rejectFn = reject;
+                // Set new timeout
                 timeout = setTimeout(() => {
                     timeout = undefined;
-                    reject = undefined;
-                    resolveFn();
+                    rejectFn = undefined;
+                    resolve();
                 }, delayMs);
             });
         };
     }
-    // Convert array of color values to linear gradient
-    convertColorValues(color) {
-        if (!Array.isArray(color))
-            return color || '';
-        if (color.length < 2)
-            return color[0] || '';
-        const canvasElement = document.createElement('canvas');
-        const ctx = canvasElement.getContext('2d');
-        const gradientHeight = canvasElement.height * (window.devicePixelRatio || 1);
-        const gradient = ctx.createLinearGradient(0, 0, 0, gradientHeight);
-        const colorStopPercentage = 1 / (color.length - 1);
-        color.forEach((color, index) => {
-            const offset = index * colorStopPercentage;
-            gradient.addColorStop(offset, color);
+    getHeight(optionsHeight, optionsSplitChannel) {
+        var _a;
+        const numberOfChannels = ((_a = this.audioData) === null || _a === void 0 ? void 0 : _a.numberOfChannels) || 1;
+        return resolveChannelHeight({
+            optionsHeight,
+            optionsSplitChannels: optionsSplitChannel,
+            parentHeight: this.parent.clientHeight,
+            numberOfChannels,
+            defaultHeight: DEFAULT_HEIGHT,
         });
-        return gradient;
+    }
+    convertColorValues(color, ctx) {
+        return resolveColorValue(color, this.getPixelRatio(), ctx === null || ctx === void 0 ? void 0 : ctx.canvas.height);
     }
     getPixelRatio() {
-        return Math.max(1, window.devicePixelRatio || 1);
+        return getPixelRatio(window.devicePixelRatio);
     }
     renderBarWaveform(channelData, options, ctx, vScale) {
-        const topChannel = channelData[0];
-        const bottomChannel = channelData[1] || channelData[0];
-        const length = topChannel.length;
         const { width, height } = ctx.canvas;
-        const halfHeight = height / 2;
-        const pixelRatio = this.getPixelRatio();
-        const barWidth = options.barWidth ? options.barWidth * pixelRatio : 1;
-        const barGap = options.barGap ? options.barGap * pixelRatio : options.barWidth ? barWidth / 2 : 0;
-        const barRadius = options.barRadius || 0;
-        const barIndexScale = width / (barWidth + barGap) / length;
-        const rectFn = barRadius && 'roundRect' in ctx ? 'roundRect' : 'rect';
+        const { halfHeight, barWidth, barRadius, barIndexScale, barSpacing, barMinHeight } = calculateBarRenderConfig({
+            width,
+            height,
+            length: (channelData[0] || []).length,
+            options,
+            pixelRatio: this.getPixelRatio(),
+        });
+        const segments = calculateBarSegments({
+            channelData,
+            barIndexScale,
+            barSpacing,
+            barWidth,
+            halfHeight,
+            vScale,
+            canvasHeight: height,
+            barAlign: options.barAlign,
+            barMinHeight,
+        });
         ctx.beginPath();
-        let prevX = 0;
-        let maxTop = 0;
-        let maxBottom = 0;
-        for (let i = 0; i <= length; i++) {
-            const x = Math.round(i * barIndexScale);
-            if (x > prevX) {
-                const topBarHeight = Math.round(maxTop * halfHeight * vScale);
-                const bottomBarHeight = Math.round(maxBottom * halfHeight * vScale);
-                const barHeight = topBarHeight + bottomBarHeight || 1;
-                // Vertical alignment
-                let y = halfHeight - topBarHeight;
-                if (options.barAlign === 'top') {
-                    y = 0;
-                }
-                else if (options.barAlign === 'bottom') {
-                    y = height - barHeight;
-                }
-                ctx[rectFn](prevX * (barWidth + barGap), y, barWidth, barHeight, barRadius);
-                prevX = x;
-                maxTop = 0;
-                maxBottom = 0;
+        for (const segment of segments) {
+            if (barRadius && 'roundRect' in ctx) {
+                ctx.roundRect(segment.x, segment.y, segment.width, segment.height, barRadius);
+            }
+            else {
+                ctx.rect(segment.x, segment.y, segment.width, segment.height);
             }
-            const magnitudeTop = Math.abs(topChannel[i] || 0);
-            const magnitudeBottom = Math.abs(bottomChannel[i] || 0);
-            if (magnitudeTop > maxTop)
-                maxTop = magnitudeTop;
-            if (magnitudeBottom > maxBottom)
-                maxBottom = magnitudeBottom;
         }
         ctx.fill();
         ctx.closePath();
     }
     renderLineWaveform(channelData, _options, ctx, vScale) {
-        const drawChannel = (index) => {
-            const channel = channelData[index] || channelData[0];
-            const length = channel.length;
-            const { height } = ctx.canvas;
-            const halfHeight = height / 2;
-            const hScale = ctx.canvas.width / length;
-            ctx.moveTo(0, halfHeight);
-            let prevX = 0;
-            let max = 0;
-            for (let i = 0; i <= length; i++) {
-                const x = Math.round(i * hScale);
-                if (x > prevX) {
-                    const h = Math.round(max * halfHeight * vScale) || 1;
-                    const y = halfHeight + h * (index === 0 ? -1 : 1);
-                    ctx.lineTo(prevX, y);
-                    prevX = x;
-                    max = 0;
-                }
-                const value = Math.abs(channel[i] || 0);
-                if (value > max)
-                    max = value;
-            }
-            ctx.lineTo(prevX, halfHeight);
-        };
+        const { width, height } = ctx.canvas;
+        const paths = calculateLinePaths({ channelData, width, height, vScale });
         ctx.beginPath();
-        drawChannel(0);
-        drawChannel(1);
+        for (const path of paths) {
+            if (!path.length)
+                continue;
+            ctx.moveTo(path[0].x, path[0].y);
+            for (let i = 1; i < path.length; i++) {
+                const point = path[i];
+                ctx.lineTo(point.x, point.y);
+            }
+        }
         ctx.fill();
         ctx.closePath();
     }
     renderWaveform(channelData, options, ctx) {
-        ctx.fillStyle = this.convertColorValues(options.waveColor);
-        // Custom rendering function
+        ctx.fillStyle = this.convertColorValues(options.waveColor, ctx);
         if (options.renderFunction) {
             options.renderFunction(channelData, ctx);
             return;
         }
-        // Vertical scaling
-        let vScale = options.barHeight || 1;
-        if (options.normalize) {
-            const max = Array.from(channelData[0]).reduce((max, value) => Math.max(max, Math.abs(value)), 0);
-            vScale = max ? 1 / max : 1;
-        }
-        // Render waveform as bars
-        if (options.barWidth || options.barGap || options.barAlign) {
+        const vScale = calculateVerticalScale({
+            channelData,
+            barHeight: options.barHeight,
+            normalize: options.normalize,
+            maxPeak: options.maxPeak,
+        });
+        if (shouldRenderBars(options)) {
             this.renderBarWaveform(channelData, options, ctx, vScale);
             return;
         }
-        // Render waveform as a polyline
         this.renderLineWaveform(channelData, options, ctx, vScale);
     }
     renderSingleCanvas(data, options, width, height, offset, canvasContainer, progressContainer) {
@@ -33068,7 +33680,13 @@ class Renderer extends EventEmitter {
         canvas.style.left = `${Math.round(offset)}px`;
         canvasContainer.appendChild(canvas);
         const ctx = canvas.getContext('2d');
-        this.renderWaveform(data, options, ctx);
+        if (options.renderFunction) {
+            ctx.fillStyle = this.convertColorValues(options.waveColor, ctx);
+            options.renderFunction(data, ctx);
+        }
+        else {
+            this.renderWaveform(data, options, ctx);
+        }
         // Draw a progress canvas
         if (canvas.width > 0 && canvas.height > 0) {
             const progressCanvas = canvas.cloneNode();
@@ -33076,7 +33694,7 @@ class Renderer extends EventEmitter {
             progressCtx.drawImage(canvas, 0, 0);
             // Set the composition method to draw only where the waveform is drawn
             progressCtx.globalCompositeOperation = 'source-in';
-            progressCtx.fillStyle = this.convertColorValues(options.progressColor);
+            progressCtx.fillStyle = this.convertColorValues(options.progressColor, progressCtx);
             // This rectangle acts as a mask thanks to the composition method
             progressCtx.fillRect(0, 0, canvas.width, canvas.height);
             progressContainer.appendChild(progressCanvas);
@@ -33086,17 +33704,8 @@ class Renderer extends EventEmitter {
         const pixelRatio = this.getPixelRatio();
         const { clientWidth } = this.scrollContainer;
         const totalWidth = width / pixelRatio;
-        let singleCanvasWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth, totalWidth);
+        const singleCanvasWidth = calculateSingleCanvasWidth({ clientWidth, totalWidth, options });
         let drawnIndexes = {};
-        // Adjust width to avoid gaps between canvases when using bars
-        if (options.barWidth || options.barGap) {
-            const barWidth = options.barWidth || 0.5;
-            const barGap = options.barGap || barWidth / 2;
-            const totalBarWidth = barWidth + barGap;
-            if (singleCanvasWidth % totalBarWidth !== 0) {
-                singleCanvasWidth = Math.floor(singleCanvasWidth / totalBarWidth) * totalBarWidth;
-            }
-        }
         // Nothing to render
         if (singleCanvasWidth === 0)
             return;
@@ -33110,24 +33719,15 @@ class Renderer extends EventEmitter {
             const offset = index * singleCanvasWidth;
             let clampedWidth = Math.min(totalWidth - offset, singleCanvasWidth);
             // Clamp the width to the bar grid to avoid empty canvases at the end
-            if (options.barWidth || options.barGap) {
-                const barWidth = options.barWidth || 0.5;
-                const barGap = options.barGap || barWidth / 2;
-                const totalBarWidth = barWidth + barGap;
-                clampedWidth = Math.floor(clampedWidth / totalBarWidth) * totalBarWidth;
-            }
+            clampedWidth = clampWidthToBarGrid(clampedWidth, options);
             if (clampedWidth <= 0)
                 return;
-            const data = channelData.map((channel) => {
-                const start = Math.floor((offset / totalWidth) * channel.length);
-                const end = Math.floor(((offset + clampedWidth) / totalWidth) * channel.length);
-                return channel.slice(start, end);
-            });
+            const data = sliceChannelData({ channelData, offset, clampedWidth, totalWidth });
             this.renderSingleCanvas(data, options, clampedWidth, height, offset, canvasContainer, progressContainer);
         };
         // Clear canvases to avoid too many DOM nodes
         const clearCanvases = () => {
-            if (Object.keys(drawnIndexes).length > Renderer.MAX_NODES) {
+            if (shouldClearCanvases(Object.keys(drawnIndexes).length)) {
                 canvasContainer.innerHTML = '';
                 progressContainer.innerHTML = '';
                 drawnIndexes = {};
@@ -33143,21 +33743,18 @@ class Renderer extends EventEmitter {
             return;
         }
         // Lazy rendering
-        const viewPosition = this.scrollContainer.scrollLeft / totalWidth;
-        const startCanvas = Math.floor(viewPosition * numCanvases);
-        // Draw the canvases in the viewport first
-        draw(startCanvas - 1);
-        draw(startCanvas);
-        draw(startCanvas + 1);
+        const initialRange = getLazyRenderRange({
+            scrollLeft: this.scrollContainer.scrollLeft,
+            totalWidth,
+            numCanvases,
+        });
+        initialRange.forEach((index) => draw(index));
         // Subscribe to the scroll event to draw additional canvases
         if (numCanvases > 1) {
             const unsubscribe = this.on('scroll', () => {
                 const { scrollLeft } = this.scrollContainer;
-                const canvasIndex = Math.floor((scrollLeft / totalWidth) * numCanvases);
                 clearCanvases();
-                draw(canvasIndex - 1);
-                draw(canvasIndex);
-                draw(canvasIndex + 1);
+                getLazyRenderRange({ scrollLeft, totalWidth, numCanvases }).forEach((index) => draw(index));
             });
             this.unsubscribeOnScroll.push(unsubscribe);
         }
@@ -33196,12 +33793,15 @@ class Renderer extends EventEmitter {
             // Determine the width of the waveform
             const pixelRatio = this.getPixelRatio();
             const parentWidth = this.scrollContainer.clientWidth;
-            const scrollWidth = Math.ceil(audioData.duration * (this.options.minPxPerSec || 0));
+            const { scrollWidth, isScrollable, useParentWidth, width } = calculateWaveformLayout({
+                duration: audioData.duration,
+                minPxPerSec: this.options.minPxPerSec || 0,
+                parentWidth,
+                fillParent: this.options.fillParent,
+                pixelRatio,
+            });
             // Whether the container should scroll
-            this.isScrollable = scrollWidth > parentWidth;
-            const useParentWidth = this.options.fillParent && !this.isScrollable;
-            // Width of the waveform in pixels
-            const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;
+            this.isScrollable = isScrollable;
             // Set the width of the wrapper
             this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`;
             // Set additional styles
@@ -33244,12 +33844,7 @@ class Renderer extends EventEmitter {
         // Adjust the scroll position so that the cursor stays in the same place
         if (this.isScrollable && scrollWidth !== this.scrollContainer.scrollWidth) {
             const { right: after } = this.progressWrapper.getBoundingClientRect();
-            let delta = after - before;
-            // to limit compounding floating-point drift
-            // we need to round to the half px furthest from 0
-            delta *= 2;
-            delta = delta < 0 ? Math.floor(delta) : Math.ceil(delta);
-            delta /= 2;
+            const delta = roundToHalfAwayFromZero(after - before);
             this.scrollContainer.scrollLeft += delta;
         }
     }
@@ -33280,16 +33875,9 @@ class Renderer extends EventEmitter {
             // Keep the cursor centered when playing
             const center = progressWidth - scrollLeft - middle;
             if (isPlaying && this.options.autoCenter && center > 0) {
-                this.scrollContainer.scrollLeft += Math.min(center, 10);
+                this.scrollContainer.scrollLeft += center;
             }
         }
-        // Emit the scroll event
-        {
-            const newScroll = this.scrollContainer.scrollLeft;
-            const startX = newScroll / scrollWidth;
-            const endX = (newScroll + clientWidth) / scrollWidth;
-            this.emit('scroll', startX, endX, newScroll, newScroll + clientWidth);
-        }
     }
     renderProgress(progress, isPlaying) {
         if (isNaN(progress))
@@ -33301,7 +33889,8 @@ class Renderer extends EventEmitter {
         this.cursor.style.transform = this.options.cursorWidth
             ? `translateX(-${progress * this.options.cursorWidth}px)`
             : '';
-        if (this.isScrollable && this.options.autoScroll) {
+        // Only scroll if we have valid audio data to prevent race conditions during loading
+        if (this.isScrollable && this.options.autoScroll && this.audioData && this.audioData.duration > 0) {
             this.scrollIntoView(progress, isPlaying);
         }
     }
@@ -33332,27 +33921,39 @@ class Renderer extends EventEmitter {
         });
     }
 }
-Renderer.MAX_CANVAS_WIDTH = 8000;
-Renderer.MAX_NODES = 10;
 
 class Timer extends EventEmitter {
     constructor() {
         super(...arguments);
-        this.unsubscribe = () => undefined;
+        this.animationFrameId = null;
+        this.isRunning = false;
     }
     start() {
-        this.unsubscribe = this.on('tick', () => {
-            requestAnimationFrame(() => {
-                this.emit('tick');
-            });
-        });
-        this.emit('tick');
+        // Prevent multiple simultaneous loops
+        if (this.isRunning)
+            return;
+        this.isRunning = true;
+        const tick = () => {
+            // Only continue if timer is still running
+            if (!this.isRunning)
+                return;
+            this.emit('tick');
+            // Schedule next frame
+            this.animationFrameId = requestAnimationFrame(tick);
+        };
+        // Start the loop
+        tick();
     }
     stop() {
-        this.unsubscribe();
+        this.isRunning = false;
+        // Cancel any pending animation frame
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
     }
     destroy() {
-        this.unsubscribe();
+        this.stop();
     }
 }
 
@@ -33367,6 +33968,10 @@ var __awaiter$4 = (undefined && undefined.__awaiter) || function (thisArg, _argu
 };
 /**
  * A Web Audio buffer player emulating the behavior of an HTML5 Audio element.
+ *
+ * Note: This class does not manage blob: URLs. If you pass a blob: URL to setSrc(),
+ * you are responsible for revoking it when done. The Player class (player.ts) handles
+ * blob URL lifecycle management automatically.
  */
 class WebAudioPlayer extends EventEmitter {
     constructor(audioContext = new AudioContext()) {
@@ -33427,14 +34032,21 @@ class WebAudioPlayer extends EventEmitter {
             this.emit('canplay');
             if (this.autoplay)
                 this.play();
+        })
+            .catch((err) => {
+            // Emit error for proper error handling
+            console.error('WebAudioPlayer load error:', err);
         });
     }
     _play() {
-        var _a;
         if (!this.paused)
             return;
         this.paused = false;
-        (_a = this.bufferNode) === null || _a === void 0 ? void 0 : _a.disconnect();
+        // Clean up old buffer node completely before creating new one
+        if (this.bufferNode) {
+            this.bufferNode.onended = null;
+            this.bufferNode.disconnect();
+        }
         this.bufferNode = this.audioContext.createBufferSource();
         if (this.buffer) {
             this.bufferNode.buffer = this.buffer;
@@ -33590,6 +34202,239 @@ class WebAudioPlayer extends EventEmitter {
     }
 }
 
+/**
+ * Centralized reactive state for WaveSurfer
+ *
+ * This module provides a single source of truth for all WaveSurfer state.
+ * State is managed using reactive signals that automatically notify subscribers.
+ */
+/**
+ * Create a new WaveSurfer state instance
+ *
+ * @param playerSignals - Optional signals from Player to compose with WaveSurfer state
+ *
+ * @example
+ * ```typescript
+ * // Without Player signals (standalone)
+ * const { state, actions } = createWaveSurferState()
+ *
+ * // With Player signals (composed)
+ * const { state, actions } = createWaveSurferState({
+ *   isPlaying: player.isPlayingSignal,
+ *   currentTime: player.currentTimeSignal,
+ *   // ...
+ * })
+ *
+ * // Read state
+ * console.log(state.isPlaying.value)
+ *
+ * // Update state
+ * actions.setPlaying(true)
+ *
+ * // Subscribe to changes
+ * state.isPlaying.subscribe(playing => {
+ *   console.log('Playing:', playing)
+ * })
+ * ```
+ */
+function createWaveSurferState(playerSignals) {
+    var _a, _b, _c, _d, _e, _f;
+    // Use Player signals if provided, otherwise create new ones
+    const currentTime = (_a = playerSignals === null || playerSignals === void 0 ? void 0 : playerSignals.currentTime) !== null && _a !== void 0 ? _a : signal(0);
+    const duration = (_b = playerSignals === null || playerSignals === void 0 ? void 0 : playerSignals.duration) !== null && _b !== void 0 ? _b : signal(0);
+    const isPlaying = (_c = playerSignals === null || playerSignals === void 0 ? void 0 : playerSignals.isPlaying) !== null && _c !== void 0 ? _c : signal(false);
+    const isSeeking = (_d = playerSignals === null || playerSignals === void 0 ? void 0 : playerSignals.isSeeking) !== null && _d !== void 0 ? _d : signal(false);
+    const volume = (_e = playerSignals === null || playerSignals === void 0 ? void 0 : playerSignals.volume) !== null && _e !== void 0 ? _e : signal(1);
+    const playbackRate = (_f = playerSignals === null || playerSignals === void 0 ? void 0 : playerSignals.playbackRate) !== null && _f !== void 0 ? _f : signal(1);
+    // WaveSurfer-specific signals (not in Player)
+    const audioBuffer = signal(null);
+    const peaks = signal(null);
+    const url = signal('');
+    const zoom = signal(0);
+    const scrollPosition = signal(0);
+    // Computed values (derived state)
+    const isPaused = computed(() => !isPlaying.value, [isPlaying]);
+    const canPlay = computed(() => audioBuffer.value !== null, [audioBuffer]);
+    const isReady = computed(() => {
+        return canPlay.value && duration.value > 0;
+    }, [canPlay, duration]);
+    const progress = computed(() => currentTime.value, [currentTime]);
+    const progressPercent = computed(() => {
+        return duration.value > 0 ? currentTime.value / duration.value : 0;
+    }, [currentTime, duration]);
+    // Public read-only state
+    const state = {
+        currentTime,
+        duration,
+        isPlaying,
+        isPaused,
+        isSeeking,
+        volume,
+        playbackRate,
+        audioBuffer,
+        peaks,
+        url,
+        zoom,
+        scrollPosition,
+        canPlay,
+        isReady,
+        progress,
+        progressPercent,
+    };
+    // Actions that modify state
+    const actions = {
+        setCurrentTime: (time) => {
+            const clampedTime = Math.max(0, Math.min(duration.value || Infinity, time));
+            currentTime.set(clampedTime);
+        },
+        setDuration: (d) => {
+            duration.set(Math.max(0, d));
+        },
+        setPlaying: (playing) => {
+            isPlaying.set(playing);
+        },
+        setSeeking: (seeking) => {
+            isSeeking.set(seeking);
+        },
+        setVolume: (v) => {
+            const clampedVolume = Math.max(0, Math.min(1, v));
+            volume.set(clampedVolume);
+        },
+        setPlaybackRate: (rate) => {
+            const clampedRate = Math.max(0.1, Math.min(16, rate));
+            playbackRate.set(clampedRate);
+        },
+        setAudioBuffer: (buffer) => {
+            audioBuffer.set(buffer);
+            if (buffer) {
+                duration.set(buffer.duration);
+            }
+        },
+        setPeaks: (p) => {
+            peaks.set(p);
+        },
+        setUrl: (u) => {
+            url.set(u);
+        },
+        setZoom: (z) => {
+            zoom.set(Math.max(0, z));
+        },
+        setScrollPosition: (pos) => {
+            scrollPosition.set(Math.max(0, pos));
+        },
+    };
+    return { state, actions };
+}
+
+/**
+ * State-driven event emission utilities
+ *
+ * Automatically emit events when reactive state changes.
+ * Ensures events are always in sync with state and removes manual emit() calls.
+ */
+/**
+ * Setup automatic event emission from state changes
+ *
+ * This function subscribes to all relevant state signals and automatically
+ * emits corresponding events when state changes. This ensures:
+ * - Events are always in sync with state
+ * - No manual emit() calls needed
+ * - Can't forget to emit an event
+ * - Clear event sources (state changes)
+ *
+ * @example
+ * ```typescript
+ * const { state } = createWaveSurferState()
+ * const wavesurfer = new WaveSurfer()
+ *
+ * const cleanup = setupStateEventEmission(state, wavesurfer)
+ *
+ * // Now state changes automatically emit events
+ * state.isPlaying.set(true) // → wavesurfer.emit('play')
+ * ```
+ *
+ * @param state - Reactive state to observe
+ * @param emitter - Event emitter to emit events on
+ * @returns Cleanup function that removes all subscriptions
+ */
+function setupStateEventEmission(state, emitter) {
+    const cleanups = [];
+    // ============================================================================
+    // Play/Pause Events
+    // ============================================================================
+    // Emit play/pause events when playing state changes
+    cleanups.push(effect(() => {
+        const isPlaying = state.isPlaying.value;
+        emitter.emit(isPlaying ? 'play' : 'pause');
+    }, [state.isPlaying]));
+    // ============================================================================
+    // Time Update Events
+    // ============================================================================
+    // Emit timeupdate when current time changes
+    cleanups.push(effect(() => {
+        const currentTime = state.currentTime.value;
+        emitter.emit('timeupdate', currentTime);
+        // Also emit audioprocess when playing
+        if (state.isPlaying.value) {
+            emitter.emit('audioprocess', currentTime);
+        }
+    }, [state.currentTime, state.isPlaying]));
+    // ============================================================================
+    // Seeking Events
+    // ============================================================================
+    // Emit seeking event when seeking state changes to true
+    cleanups.push(effect(() => {
+        const isSeeking = state.isSeeking.value;
+        if (isSeeking) {
+            emitter.emit('seeking', state.currentTime.value);
+        }
+    }, [state.isSeeking, state.currentTime]));
+    // ============================================================================
+    // Ready Event
+    // ============================================================================
+    // Emit ready when state becomes ready
+    let wasReady = false;
+    cleanups.push(effect(() => {
+        const isReady = state.isReady.value;
+        if (isReady && !wasReady) {
+            wasReady = true;
+            emitter.emit('ready', state.duration.value);
+        }
+    }, [state.isReady, state.duration]));
+    // ============================================================================
+    // Finish Event
+    // ============================================================================
+    // Emit finish when playback ends (reached duration and stopped)
+    let wasPlayingAtEnd = false;
+    cleanups.push(effect(() => {
+        const isPlaying = state.isPlaying.value;
+        const currentTime = state.currentTime.value;
+        const duration = state.duration.value;
+        // Check if we're at the end
+        const isAtEnd = duration > 0 && currentTime >= duration;
+        // Emit finish when we were playing at end and now stopped
+        if (wasPlayingAtEnd && !isPlaying && isAtEnd) {
+            emitter.emit('finish');
+        }
+        // Track if we're playing at the end
+        wasPlayingAtEnd = isPlaying && isAtEnd;
+    }, [state.isPlaying, state.currentTime, state.duration]));
+    // ============================================================================
+    // Zoom Events
+    // ============================================================================
+    // Emit zoom when zoom level changes
+    cleanups.push(effect(() => {
+        const zoom = state.zoom.value;
+        if (zoom > 0) {
+            emitter.emit('zoom', zoom);
+        }
+    }, [state.zoom]));
+    // Return cleanup function
+    return () => {
+        cleanups.forEach((cleanup) => cleanup());
+    };
+}
+
 var __awaiter$5 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -33616,6 +34461,14 @@ class WaveSurfer extends Player {
     static create(options) {
         return new WaveSurfer(options);
     }
+    /** Get the reactive state for advanced use cases */
+    getState() {
+        return this.wavesurferState;
+    }
+    /** Get the renderer instance for plugin access to reactive streams */
+    getRenderer() {
+        return this.renderer;
+    }
     /** Create a new WaveSurfer instance */
     constructor(options) {
         const media = options.media ||
@@ -33632,13 +34485,27 @@ class WaveSurfer extends Player {
         this.subscriptions = [];
         this.mediaSubscriptions = [];
         this.abortController = null;
+        this.reactiveCleanups = [];
         this.options = Object.assign({}, defaultOptions, options);
+        // Initialize reactive state
+        // Pass Player signals to compose them into WaveSurferState
+        const { state, actions } = createWaveSurferState({
+            isPlaying: this.isPlayingSignal,
+            currentTime: this.currentTimeSignal,
+            duration: this.durationSignal,
+            volume: this.volumeSignal,
+            playbackRate: this.playbackRateSignal,
+            isSeeking: this.seekingSignal,
+        });
+        this.wavesurferState = state;
+        this.wavesurferActions = actions;
         this.timer = new Timer();
         const audioElement = media ? undefined : this.getMediaElement();
         this.renderer = new Renderer(this.options, audioElement);
         this.initPlayerEvents();
         this.initRendererEvents();
         this.initTimerEvents();
+        this.initReactiveState();
         this.initPlugins();
         // Read the initial URL before load has been called
         const initialUrl = this.options.url || this.getSrc() || '';
@@ -33651,7 +34518,10 @@ class WaveSurfer extends Player {
             if (initialUrl || (peaks && duration)) {
                 // Swallow async errors because they cannot be caught from a constructor call.
                 // Subscribe to the wavesurfer's error event to handle them.
-                this.load(initialUrl, peaks, duration).catch(() => null);
+                this.load(initialUrl, peaks, duration).catch((err) => {
+                    // Emit error event for proper error handling
+                    this.emit('error', err instanceof Error ? err : new Error(String(err)));
+                });
             }
         });
     }
@@ -33673,6 +34543,12 @@ class WaveSurfer extends Player {
             }
         }));
     }
+    initReactiveState() {
+        // Bridge reactive state to EventEmitter for backwards compatibility
+        this.reactiveCleanups.push(setupStateEventEmission(this.wavesurferState, {
+            emit: this.emit.bind(this),
+        }));
+    }
     initPlayerEvents() {
         if (this.isPlaying()) {
             this.emit('play');
@@ -33737,33 +34613,44 @@ class WaveSurfer extends Player {
         // DragEnd
         this.renderer.on('dragend', (relativeX) => {
             this.emit('dragend', relativeX);
+        }), 
+        // Resize
+        this.renderer.on('resize', () => {
+            this.emit('resize');
         }));
         // Drag
         {
             let debounce;
-            this.subscriptions.push(this.renderer.on('drag', (relativeX) => {
+            const unsubscribeDrag = this.renderer.on('drag', (relativeX) => {
+                var _a;
                 if (!this.options.interact)
                     return;
                 // Update the visual position
                 this.renderer.renderProgress(relativeX);
                 // Set the audio position with a debounce
                 clearTimeout(debounce);
-                let debounceTime;
+                let debounceTime = 0;
+                const dragToSeek = this.options.dragToSeek;
                 if (this.isPlaying()) {
                     debounceTime = 0;
                 }
-                else if (this.options.dragToSeek === true) {
+                else if (dragToSeek === true) {
                     debounceTime = 200;
                 }
-                else if (typeof this.options.dragToSeek === 'object' && this.options.dragToSeek !== undefined) {
-                    debounceTime = this.options.dragToSeek['debounceTime'];
+                else if (dragToSeek && typeof dragToSeek === 'object') {
+                    debounceTime = (_a = dragToSeek.debounceTime) !== null && _a !== void 0 ? _a : 200;
                 }
                 debounce = setTimeout(() => {
                     this.seekTo(relativeX);
                 }, debounceTime);
                 this.emit('interaction', relativeX * this.getDuration());
                 this.emit('drag', relativeX);
-            }));
+            });
+            // Clear debounce timeout on destroy
+            this.subscriptions.push(() => {
+                clearTimeout(debounce);
+                unsubscribeDrag();
+            });
         }
     }
     initPlugins() {
@@ -33850,12 +34737,15 @@ class WaveSurfer extends Player {
                 this.pause();
             this.decodedData = null;
             this.stopAtPosition = null;
+            // Abort any ongoing fetch before starting a new one
+            (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+            this.abortController = null;
             // Fetch the entire audio as a blob if pre-decoded data is not provided
             if (!blob && !channelData) {
                 const fetchParams = this.options.fetchParams || {};
                 if (window.AbortController && !fetchParams.signal) {
                     this.abortController = new AbortController();
-                    fetchParams.signal = (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.signal;
+                    fetchParams.signal = this.abortController.signal;
                 }
                 const onProgress = (percentage) => this.emit('loading', percentage);
                 blob = yield Fetcher.fetchBlob(url, onProgress, fetchParams);
@@ -33945,8 +34835,8 @@ class WaveSurfer extends Player {
             const channel = this.decodedData.getChannelData(i);
             const data = [];
             const sampleSize = channel.length / maxLength;
-            for (let i = 0; i < maxLength; i++) {
-                const sample = channel.slice(Math.floor(i * sampleSize), Math.ceil((i + 1) * sampleSize));
+            for (let j = 0; j < maxLength; j++) {
+                const sample = channel.slice(Math.floor(j * sampleSize), Math.ceil((j + 1) * sampleSize));
                 let max = 0;
                 for (let x = 0; x < sample.length; x++) {
                     const n = sample[x];
@@ -33979,7 +34869,7 @@ class WaveSurfer extends Player {
         this.updateProgress(time);
         this.emit('timeupdate', time);
     }
-    /** Seek to a percentage of audio as [0..1] (0 = beginning, 1 = end) */
+    /** Seek to a ratio of audio as [0..1] (0 = beginning, 1 = end) */
     seekTo(progress) {
         const time = this.getDuration() * progress;
         this.setTime(time);
@@ -34043,6 +34933,8 @@ class WaveSurfer extends Player {
         this.plugins.forEach((plugin) => plugin.destroy());
         this.subscriptions.forEach((unsubscribe) => unsubscribe());
         this.unsubscribePlayerEvents();
+        this.reactiveCleanups.forEach((cleanup) => cleanup());
+        this.reactiveCleanups = [];
         this.timer.destroy();
         this.renderer.destroy();
         super.destroy();
@@ -35260,7 +36152,11 @@ var Attachment = function Attachment(_ref) {
     channelId: channelId,
     incoming: incoming,
     viewOnce: viewOnce,
-    setViewOnceVoiceModalOpen: viewOnce ? setViewOnceVoiceModalOpen : undefined
+    setViewOnceVoiceModalOpen: viewOnce ? function () {
+      if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
+        setViewOnceVoiceModalOpen(true);
+      }
+    } : undefined
   })) : attachment.type === attachmentTypes.link ? null : (
   /*#__PURE__*/
   React__default.createElement(AttachmentFile$1, {