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

package/index.modern.js

@@ -10,6 +10,8 @@ import LinkifyIt from 'linkify-it';
 import Cropper from 'react-easy-crop';
 import Carousel from 'react-elastic-carousel';
 import { CircularProgressbar } from 'react-circular-progressbar';
+import { FFmpeg } from '@ffmpeg/ffmpeg';
+import { fetchFile, toBlobURL } from '@ffmpeg/util';
 import { $applyNodeReplacement, TextNode, $createTextNode, $getSelection, $isRangeSelection, $isTextNode, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, $getRoot, $createParagraphNode, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_NORMAL } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
@@ -32187,16 +32189,15 @@ 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) {
-            // Create a wrapper that removes itself after being called once
-            const onceWrapper = (...args) => {
-                this.un(event, onceWrapper);
-                listener(...args);
+            const unsubscribeOnce = () => {
+                this.un(event, unsubscribeOnce);
+                this.un(event, listener);
             };
-            this.listeners[event].add(onceWrapper);
-            return () => this.un(event, onceWrapper);
+            this.on(event, unsubscribeOnce);
+            return unsubscribeOnce;
         }
-        this.listeners[event].add(listener);
         return () => this.un(event, listener);
     }
     /** Unsubscribe from an event */
@@ -32266,13 +32267,8 @@ 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 });
-        try {
-            return yield audioCtx.decodeAudioData(audioData);
-        }
-        finally {
-            // Ensure AudioContext is always closed, even on synchronous errors
-            audioCtx.close();
-        }
+        const decode = audioCtx.decodeAudioData(audioData);
+        return decode.finally(() => audioCtx.close());
     });
 }
 /** Normalize peaks to -1..1 */
@@ -32296,36 +32292,17 @@ 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: 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;
-        },
+        length: channelData[0].length,
+        sampleRate: channelData[0].length / duration,
+        numberOfChannels: channelData.length,
+        getChannelData: (i) => channelData === null || channelData === void 0 ? void 0 : channelData[i],
         copyFromChannel: AudioBuffer.prototype.copyFromChannel,
         copyToChannel: AudioBuffer.prototype.copyToChannel,
     };
@@ -32394,26 +32371,28 @@ function watchProgress(response, progressCallback) {
         const contentLength = Number(response.headers.get('Content-Length')) || 0;
         let receivedLength = 0;
         // Process the data
-        const processChunk = (value) => {
+        const processChunk = (value) => __awaiter$1(this, void 0, void 0, function* () {
             // 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);
-        };
-        // Use iteration instead of recursion to avoid stack issues
-        try {
-            while (true) {
-                const data = yield reader.read();
-                if (data.done) {
-                    break;
-                }
+        });
+        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) {
                 processChunk(data.value);
+                yield read();
             }
-        }
-        catch (err) {
-            // Ignore errors because we can only handle the main response
-            console.warn('Progress tracking error:', err);
-        }
+        });
+        read();
     });
 }
 function fetchBlob(url, progressCallback, requestInit) {
@@ -32432,121 +32411,6 @@ 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) {
@@ -32557,33 +32421,9 @@ 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;
@@ -32591,16 +32431,6 @@ 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;
@@ -32618,48 +32448,6 @@ 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);
@@ -32696,27 +32484,17 @@ 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() {
@@ -32796,312 +32574,23 @@ class Player extends EventEmitter {
     }
 }
 
-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();
+function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mouseButton = 0, touchDelay = 100) {
+    if (!element)
+        return () => void 0;
     const isTouchDevice = matchMedia('(pointer: coarse)').matches;
     let unsubscribeDocument = () => void 0;
     const onPointerDown = (event) => {
         if (event.button !== mouseButton)
             return;
-        activePointers.set(event.pointerId, event);
-        if (activePointers.size > 1) {
-            return;
-        }
+        event.preventDefault();
+        event.stopPropagation();
         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) => {
-            if (event.defaultPrevented || activePointers.size > 1) {
-                return;
-            }
+            event.preventDefault();
+            event.stopPropagation();
             if (isTouchDevice && Date.now() - touchStartTime < touchDelay)
                 return;
             const x = event.clientX;
@@ -33109,45 +32598,29 @@ function createDragStream(element, options = {}) {
             const dx = x - startX;
             const dy = y - startY;
             if (isDragging || Math.abs(dx) > threshold || Math.abs(dy) > threshold) {
-                event.preventDefault();
-                event.stopPropagation();
+                const rect = element.getBoundingClientRect();
+                const { left, top } = rect;
                 if (!isDragging) {
-                    // Emit start event
-                    dragSignal.set({
-                        type: 'start',
-                        x: startX - left,
-                        y: startY - top,
-                    });
+                    onStart === null || onStart === void 0 ? void 0 : onStart(startX - left, startY - top);
                     isDragging = true;
                 }
-                // Emit move event
-                dragSignal.set({
-                    type: 'move',
-                    x: x - left,
-                    y: y - top,
-                    deltaX: dx,
-                    deltaY: dy,
-                });
+                onDrag(dx, dy, x - left, y - top);
                 startX = x;
                 startY = y;
             }
         };
         const onPointerUp = (event) => {
-            activePointers.delete(event.pointerId);
             if (isDragging) {
                 const x = event.clientX;
                 const y = event.clientY;
-                // Emit end event
-                dragSignal.set({
-                    type: 'end',
-                    x: x - left,
-                    y: y - top,
-                });
+                const rect = element.getBoundingClientRect();
+                const { left, top } = rect;
+                onEnd === null || onEnd === void 0 ? void 0 : onEnd(x - left, y - top);
             }
             unsubscribeDocument();
         };
         const onPointerLeave = (e) => {
-            activePointers.delete(e.pointerId);
+            // Listen to events only on the document and not on inner elements
             if (!e.relatedTarget || e.relatedTarget === document.documentElement) {
                 onPointerUp(e);
             }
@@ -33159,9 +32632,6 @@ function createDragStream(element, options = {}) {
             }
         };
         const onTouchMove = (event) => {
-            if (event.defaultPrevented || activePointers.size > 1) {
-                return;
-            }
             if (isDragging) {
                 event.preventDefault();
             }
@@ -33184,114 +32654,9 @@ function createDragStream(element, options = {}) {
         };
     };
     element.addEventListener('pointerdown', onPointerDown);
-    const cleanupFn = () => {
+    return () => {
         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,
     };
 }
 
@@ -33326,8 +32691,6 @@ 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);
@@ -33359,30 +32722,35 @@ 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 rect = this.wrapper.getBoundingClientRect();
-            const [x, y] = getRelativePointerPosition(rect, e.clientX, e.clientY);
+            const [x, y] = getClickPosition(e);
             this.emit('click', x, y);
         });
         // Add a double click listener
         this.wrapper.addEventListener('dblclick', (e) => {
-            const rect = this.wrapper.getBoundingClientRect();
-            const [x, y] = getRelativePointerPosition(rect, e.clientX, e.clientY);
+            const [x, y] = getClickPosition(e);
             this.emit('dblclick', x, y);
         });
         // Drag
         if (this.options.dragToSeek === true || typeof this.options.dragToSeek === 'object') {
             this.initDrag();
         }
-        // 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);
+        // 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);
+        });
         // Re-render the waveform on container resize
         if (typeof ResizeObserver === 'function') {
             const delay = this.createDelay(100);
@@ -33400,32 +32768,39 @@ class Renderer extends EventEmitter {
             return;
         this.lastContainerWidth = width;
         this.reRender();
-        this.emit('resize');
     }
     initDrag() {
-        // 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);
+        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;
     }
     initHtml() {
         const div = document.createElement('div');
@@ -33462,7 +32837,6 @@ 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;
@@ -33539,134 +32913,150 @@ class Renderer extends EventEmitter {
         this.setScroll(scrollStart);
     }
     destroy() {
-        var _a;
+        var _a, _b;
         this.subscriptions.forEach((unsubscribe) => unsubscribe());
         this.container.remove();
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = null;
-        }
-        (_a = this.unsubscribeOnScroll) === null || _a === void 0 ? void 0 : _a.forEach((unsubscribe) => unsubscribe());
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.unsubscribeOnScroll) === null || _b === void 0 ? void 0 : _b.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 rejectFn;
+        let reject;
         const onClear = () => {
-            if (timeout) {
+            if (timeout)
                 clearTimeout(timeout);
-                timeout = undefined;
-            }
-            if (rejectFn) {
-                rejectFn();
-                rejectFn = undefined;
-            }
+            if (reject)
+                reject();
         };
         this.timeouts.push(onClear);
         return () => {
-            return new Promise((resolve, reject) => {
-                // Clear any pending delay
+            return new Promise((resolveFn, rejectFn) => {
                 onClear();
-                // Store reject function for cleanup
-                rejectFn = reject;
-                // Set new timeout
+                reject = rejectFn;
                 timeout = setTimeout(() => {
                     timeout = undefined;
-                    rejectFn = undefined;
-                    resolve();
+                    reject = undefined;
+                    resolveFn();
                 }, delayMs);
             });
         };
     }
-    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,
+    // 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);
         });
-    }
-    convertColorValues(color, ctx) {
-        return resolveColorValue(color, this.getPixelRatio(), ctx === null || ctx === void 0 ? void 0 : ctx.canvas.height);
+        return gradient;
     }
     getPixelRatio() {
-        return getPixelRatio(window.devicePixelRatio);
+        return Math.max(1, window.devicePixelRatio || 1);
     }
     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, 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,
-        });
+        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';
         ctx.beginPath();
-        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);
+        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;
             }
+            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 { width, height } = ctx.canvas;
-        const paths = calculateLinePaths({ channelData, width, height, vScale });
-        ctx.beginPath();
-        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);
+        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);
+        };
+        ctx.beginPath();
+        drawChannel(0);
+        drawChannel(1);
         ctx.fill();
         ctx.closePath();
     }
     renderWaveform(channelData, options, ctx) {
-        ctx.fillStyle = this.convertColorValues(options.waveColor, ctx);
+        ctx.fillStyle = this.convertColorValues(options.waveColor);
+        // Custom rendering function
         if (options.renderFunction) {
             options.renderFunction(channelData, ctx);
             return;
         }
-        const vScale = calculateVerticalScale({
-            channelData,
-            barHeight: options.barHeight,
-            normalize: options.normalize,
-            maxPeak: options.maxPeak,
-        });
-        if (shouldRenderBars(options)) {
+        // 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) {
             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) {
@@ -33679,13 +33069,7 @@ class Renderer extends EventEmitter {
         canvas.style.left = `${Math.round(offset)}px`;
         canvasContainer.appendChild(canvas);
         const ctx = canvas.getContext('2d');
-        if (options.renderFunction) {
-            ctx.fillStyle = this.convertColorValues(options.waveColor, ctx);
-            options.renderFunction(data, ctx);
-        }
-        else {
-            this.renderWaveform(data, options, ctx);
-        }
+        this.renderWaveform(data, options, ctx);
         // Draw a progress canvas
         if (canvas.width > 0 && canvas.height > 0) {
             const progressCanvas = canvas.cloneNode();
@@ -33693,7 +33077,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);
+            progressCtx.fillStyle = this.convertColorValues(options.progressColor);
             // This rectangle acts as a mask thanks to the composition method
             progressCtx.fillRect(0, 0, canvas.width, canvas.height);
             progressContainer.appendChild(progressCanvas);
@@ -33703,8 +33087,17 @@ class Renderer extends EventEmitter {
         const pixelRatio = this.getPixelRatio();
         const { clientWidth } = this.scrollContainer;
         const totalWidth = width / pixelRatio;
-        const singleCanvasWidth = calculateSingleCanvasWidth({ clientWidth, totalWidth, options });
+        let singleCanvasWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth, totalWidth);
         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;
@@ -33718,15 +33111,24 @@ 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
-            clampedWidth = clampWidthToBarGrid(clampedWidth, options);
+            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;
+            }
             if (clampedWidth <= 0)
                 return;
-            const data = sliceChannelData({ channelData, offset, clampedWidth, totalWidth });
+            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);
+            });
             this.renderSingleCanvas(data, options, clampedWidth, height, offset, canvasContainer, progressContainer);
         };
         // Clear canvases to avoid too many DOM nodes
         const clearCanvases = () => {
-            if (shouldClearCanvases(Object.keys(drawnIndexes).length)) {
+            if (Object.keys(drawnIndexes).length > Renderer.MAX_NODES) {
                 canvasContainer.innerHTML = '';
                 progressContainer.innerHTML = '';
                 drawnIndexes = {};
@@ -33742,18 +33144,21 @@ class Renderer extends EventEmitter {
             return;
         }
         // Lazy rendering
-        const initialRange = getLazyRenderRange({
-            scrollLeft: this.scrollContainer.scrollLeft,
-            totalWidth,
-            numCanvases,
-        });
-        initialRange.forEach((index) => draw(index));
+        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);
         // 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();
-                getLazyRenderRange({ scrollLeft, totalWidth, numCanvases }).forEach((index) => draw(index));
+                draw(canvasIndex - 1);
+                draw(canvasIndex);
+                draw(canvasIndex + 1);
             });
             this.unsubscribeOnScroll.push(unsubscribe);
         }
@@ -33792,15 +33197,12 @@ class Renderer extends EventEmitter {
             // Determine the width of the waveform
             const pixelRatio = this.getPixelRatio();
             const parentWidth = this.scrollContainer.clientWidth;
-            const { scrollWidth, isScrollable, useParentWidth, width } = calculateWaveformLayout({
-                duration: audioData.duration,
-                minPxPerSec: this.options.minPxPerSec || 0,
-                parentWidth,
-                fillParent: this.options.fillParent,
-                pixelRatio,
-            });
+            const scrollWidth = Math.ceil(audioData.duration * (this.options.minPxPerSec || 0));
             // Whether the container should scroll
-            this.isScrollable = isScrollable;
+            this.isScrollable = scrollWidth > parentWidth;
+            const useParentWidth = this.options.fillParent && !this.isScrollable;
+            // Width of the waveform in pixels
+            const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;
             // Set the width of the wrapper
             this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`;
             // Set additional styles
@@ -33843,7 +33245,12 @@ 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();
-            const delta = roundToHalfAwayFromZero(after - before);
+            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;
             this.scrollContainer.scrollLeft += delta;
         }
     }
@@ -33874,9 +33281,16 @@ 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 += center;
+                this.scrollContainer.scrollLeft += Math.min(center, 10);
             }
         }
+        // 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))
@@ -33888,8 +33302,7 @@ class Renderer extends EventEmitter {
         this.cursor.style.transform = this.options.cursorWidth
             ? `translateX(-${progress * this.options.cursorWidth}px)`
             : '';
-        // 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) {
+        if (this.isScrollable && this.options.autoScroll) {
             this.scrollIntoView(progress, isPlaying);
         }
     }
@@ -33920,39 +33333,27 @@ class Renderer extends EventEmitter {
         });
     }
 }
+Renderer.MAX_CANVAS_WIDTH = 8000;
+Renderer.MAX_NODES = 10;
 
 class Timer extends EventEmitter {
     constructor() {
         super(...arguments);
-        this.animationFrameId = null;
-        this.isRunning = false;
+        this.unsubscribe = () => undefined;
     }
     start() {
-        // 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();
+        this.unsubscribe = this.on('tick', () => {
+            requestAnimationFrame(() => {
+                this.emit('tick');
+            });
+        });
+        this.emit('tick');
     }
     stop() {
-        this.isRunning = false;
-        // Cancel any pending animation frame
-        if (this.animationFrameId !== null) {
-            cancelAnimationFrame(this.animationFrameId);
-            this.animationFrameId = null;
-        }
+        this.unsubscribe();
     }
     destroy() {
-        this.stop();
+        this.unsubscribe();
     }
 }
 
@@ -33967,10 +33368,6 @@ 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()) {
@@ -34031,21 +33428,14 @@ 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;
-        // Clean up old buffer node completely before creating new one
-        if (this.bufferNode) {
-            this.bufferNode.onended = null;
-            this.bufferNode.disconnect();
-        }
+        (_a = this.bufferNode) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.bufferNode = this.audioContext.createBufferSource();
         if (this.buffer) {
             this.bufferNode.buffer = this.buffer;
@@ -34201,239 +33591,6 @@ 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) {
@@ -34460,14 +33617,6 @@ 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 ||
@@ -34484,27 +33633,13 @@ 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() || '';
@@ -34517,10 +33652,7 @@ 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((err) => {
-                    // Emit error event for proper error handling
-                    this.emit('error', err instanceof Error ? err : new Error(String(err)));
-                });
+                this.load(initialUrl, peaks, duration).catch(() => null);
             }
         });
     }
@@ -34542,12 +33674,6 @@ 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');
@@ -34612,44 +33738,33 @@ 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;
-            const unsubscribeDrag = this.renderer.on('drag', (relativeX) => {
-                var _a;
+            this.subscriptions.push(this.renderer.on('drag', (relativeX) => {
                 if (!this.options.interact)
                     return;
                 // Update the visual position
                 this.renderer.renderProgress(relativeX);
                 // Set the audio position with a debounce
                 clearTimeout(debounce);
-                let debounceTime = 0;
-                const dragToSeek = this.options.dragToSeek;
+                let debounceTime;
                 if (this.isPlaying()) {
                     debounceTime = 0;
                 }
-                else if (dragToSeek === true) {
+                else if (this.options.dragToSeek === true) {
                     debounceTime = 200;
                 }
-                else if (dragToSeek && typeof dragToSeek === 'object') {
-                    debounceTime = (_a = dragToSeek.debounceTime) !== null && _a !== void 0 ? _a : 200;
+                else if (typeof this.options.dragToSeek === 'object' && this.options.dragToSeek !== undefined) {
+                    debounceTime = this.options.dragToSeek['debounceTime'];
                 }
                 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() {
@@ -34736,15 +33851,12 @@ 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 = this.abortController.signal;
+                    fetchParams.signal = (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.signal;
                 }
                 const onProgress = (percentage) => this.emit('loading', percentage);
                 blob = yield Fetcher.fetchBlob(url, onProgress, fetchParams);
@@ -34834,8 +33946,8 @@ class WaveSurfer extends Player {
             const channel = this.decodedData.getChannelData(i);
             const data = [];
             const sampleSize = channel.length / maxLength;
-            for (let j = 0; j < maxLength; j++) {
-                const sample = channel.slice(Math.floor(j * sampleSize), Math.ceil((j + 1) * sampleSize));
+            for (let i = 0; i < maxLength; i++) {
+                const sample = channel.slice(Math.floor(i * sampleSize), Math.ceil((i + 1) * sampleSize));
                 let max = 0;
                 for (let x = 0; x < sample.length; x++) {
                     const n = sample[x];
@@ -34868,7 +33980,7 @@ class WaveSurfer extends Player {
         this.updateProgress(time);
         this.emit('timeupdate', time);
     }
-    /** Seek to a ratio of audio as [0..1] (0 = beginning, 1 = end) */
+    /** Seek to a percentage of audio as [0..1] (0 = beginning, 1 = end) */
     seekTo(progress) {
         const time = this.getDuration() * progress;
         this.setTime(time);
@@ -34932,8 +34044,6 @@ 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();
@@ -35006,9 +34116,170 @@ var Bar = styled.div(_templateObject2$q || (_templateObject2$q = _taggedTemplate
   return props.progressColor;
 });
 
+var ffmpegInstance = null;
+var isFFmpegLoading = false;
+var ffmpegLoadPromise = null;
+var isSafari = function isSafari() {
+  if (typeof window === 'undefined' || !window.navigator) {
+    return false;
+  }
+  var userAgent = window.navigator.userAgent;
+  return /^((?!chrome|android).)*safari/i.test(userAgent);
+};
+var initFFmpeg = function initFFmpeg() {
+  try {
+    if (ffmpegInstance) {
+      return Promise.resolve(ffmpegInstance);
+    }
+    if (isFFmpegLoading && ffmpegLoadPromise) {
+      return Promise.resolve(ffmpegLoadPromise.then(function () {
+        if (!ffmpegInstance) {
+          throw new Error('FFmpeg failed to initialize');
+        }
+        return ffmpegInstance;
+      }));
+    }
+    isFFmpegLoading = true;
+    ffmpegLoadPromise = function () {
+      try {
+        return Promise.resolve(_catch(function () {
+          var ffmpeg = new FFmpeg();
+          var baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd';
+          var _load = ffmpeg.load;
+          return Promise.resolve(toBlobURL(baseURL + "/ffmpeg-core.js", 'text/javascript')).then(function (_toBlobURL) {
+            return Promise.resolve(toBlobURL(baseURL + "/ffmpeg-core.wasm", 'application/wasm')).then(function (_toBlobURL2) {
+              return Promise.resolve(_load.call(ffmpeg, {
+                coreURL: _toBlobURL,
+                wasmURL: _toBlobURL2
+              })).then(function () {
+                ffmpegInstance = ffmpeg;
+                isFFmpegLoading = false;
+              });
+            });
+          });
+        }, function (error) {
+          isFFmpegLoading = false;
+          ffmpegLoadPromise = null;
+          ffmpegInstance = null;
+          log.error('Failed to load FFmpeg:', error);
+          throw error;
+        }));
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }();
+    return Promise.resolve(ffmpegLoadPromise).then(function () {
+      if (!ffmpegInstance) {
+        throw new Error('FFmpeg instance is null after initialization');
+      }
+      return ffmpegInstance;
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var convertMp3ToAac = function convertMp3ToAac(file, messageId) {
+  try {
+    return Promise.resolve(_catch(function () {
+      var maxSize = 50 * 1024 * 1024;
+      if (file.size > maxSize) {
+        throw new Error("File size (" + (file.size / 1024 / 1024).toFixed(2) + "MB) exceeds maximum allowed size (50MB)");
+      }
+      if (file.size === 0) {
+        throw new Error('File is empty');
+      }
+      return Promise.resolve(initFFmpeg()).then(function (ffmpeg) {
+        function _temp8() {
+          function _temp6() {
+            return Promise.resolve(fetchFile(file)).then(function (inputData) {
+              return Promise.resolve(ffmpeg.writeFile(messageId + "_input.mp3", inputData)).then(function () {
+                return Promise.resolve(ffmpeg.exec(['-i', messageId + "_input.mp3", '-c:a', 'aac', '-b:a', '128k', '-movflags', '+faststart', messageId + "_output.m4a"])).then(function () {
+                  return Promise.resolve(ffmpeg.readFile(messageId + "_output.m4a")).then(function (data) {
+                    function _temp4() {
+                      function _temp2() {
+                        var dataArray;
+                        if (data instanceof Uint8Array) {
+                          dataArray = data;
+                        } else if (typeof data === 'string') {
+                          var binaryString = atob(data);
+                          var bytes = new Uint8Array(binaryString.length);
+                          for (var i = 0; i < binaryString.length; i++) {
+                            bytes[i] = binaryString.charCodeAt(i);
+                          }
+                          dataArray = bytes;
+                        } else {
+                          dataArray = new Uint8Array(data);
+                        }
+                        var arrayBuffer = dataArray.buffer.slice(dataArray.byteOffset, dataArray.byteOffset + dataArray.byteLength);
+                        var blob = new Blob([arrayBuffer], {
+                          type: 'audio/mp4'
+                        });
+                        var convertedFile = new File([blob], messageId + "_" + file.name.replace('.mp3', '.m4a'), {
+                          type: 'audio/mp4',
+                          lastModified: file.lastModified
+                        });
+                        return convertedFile;
+                      }
+                      var _temp = _catch(function () {
+                        return Promise.resolve(ffmpeg.deleteFile(messageId + "_output.m4a")).then(function () {});
+                      }, function () {});
+                      return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+                    }
+                    var _temp3 = _catch(function () {
+                      return Promise.resolve(ffmpeg.deleteFile(messageId + "_input.mp3")).then(function () {});
+                    }, function () {});
+                    return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+                  });
+                });
+              });
+            });
+          }
+          var _temp5 = _catch(function () {
+            return Promise.resolve(ffmpeg.deleteFile(messageId + "_output.m4a")).then(function () {});
+          }, function () {});
+          return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5);
+        }
+        var _temp7 = _catch(function () {
+          return Promise.resolve(ffmpeg.deleteFile(messageId + "_input.mp3")).then(function () {});
+        }, function () {});
+        return _temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7);
+      });
+    }, function (error) {
+      log.error('Failed to convert MP3 to AAC:', error);
+      throw error;
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var convertAudioForSafari = function convertAudioForSafari(file, messageId) {
+  try {
+    var _exit = false;
+    var _temp9 = function () {
+      if (isSafari() && file.type === 'audio/mpeg' && file.name.endsWith('.mp3')) {
+        return _catch(function () {
+          return Promise.resolve(convertMp3ToAac(file, messageId)).then(function (_await$convertMp3ToAa) {
+            _exit = true;
+            return _await$convertMp3ToAa;
+          });
+        }, function (error) {
+          log.warn('Audio conversion failed, using original file:', error);
+          _exit = true;
+          return file;
+        });
+      }
+    }();
+    return Promise.resolve(_temp9 && _temp9.then ? _temp9.then(function (_result2) {
+      return _exit ? _result2 : file;
+    }) : _exit ? _temp9 : file);
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
 var _templateObject$v, _templateObject2$r, _templateObject3$l, _templateObject4$h, _templateObject5$e, _templateObject6$c, _templateObject7$b, _templateObject8$b;
 var AudioPlayer = function AudioPlayer(_ref) {
-  var _file$metadata, _file$metadata2, _file$metadata3;
+  var _file$metadata5, _file$metadata6, _file$metadata7;
   var url = _ref.url,
     file = _ref.file,
     messagePlayed = _ref.messagePlayed,
@@ -35059,6 +34330,7 @@ var AudioPlayer = function AudioPlayer(_ref) {
   var wavesurfer = useRef(null);
   var wavesurferContainer = useRef(null);
   var intervalRef = useRef(null);
+  var convertedUrlRef = useRef(null);
   var handleSetAudioRate = function handleSetAudioRate() {
     if (wavesurfer.current) {
       if (audioRate === 1) {
@@ -35142,84 +34414,131 @@ var AudioPlayer = function AudioPlayer(_ref) {
   }, [recording.initRecording]);
   useEffect(function () {
     if (url) {
+      if (convertedUrlRef.current) {
+        URL.revokeObjectURL(convertedUrlRef.current);
+        convertedUrlRef.current = null;
+      }
       if (url !== '_' && !isRendered && wavesurfer && wavesurfer.current) {
         wavesurfer.current.destroy();
       }
       var initWaveSurfer = function initWaveSurfer() {
         try {
-          try {
-            wavesurfer.current = WaveSurfer.create({
-              container: wavesurferContainer.current,
-              waveColor: 'transparent',
-              progressColor: 'transparent',
-              audioRate: audioRate,
-              barWidth: 1,
-              barHeight: 1,
-              hideScrollbar: true,
-              barRadius: 1.5,
-              cursorWidth: 0,
-              barGap: 2,
-              height: 20
-            });
-            var peaks;
-            if (file.metadata) {
-              if (file.metadata.dur) {
-                setDuration(file.metadata.dur);
-                setCurrentTime(formatAudioVideoTime(file.metadata.dur));
+          var _exit = false;
+          return Promise.resolve(_catch(function () {
+            var _file$name;
+            function _temp2(_result2) {
+              if (_exit) return _result2;
+              wavesurfer.current = WaveSurfer.create({
+                container: wavesurferContainer.current,
+                waveColor: 'transparent',
+                progressColor: 'transparent',
+                audioRate: audioRate,
+                barWidth: 1,
+                barHeight: 1,
+                hideScrollbar: true,
+                barRadius: 1.5,
+                cursorWidth: 0,
+                barGap: 2,
+                height: 20
+              });
+              var peaks;
+              if (file.metadata) {
+                if (file.metadata.dur) {
+                  setDuration(file.metadata.dur);
+                  setCurrentTime(formatAudioVideoTime(file.metadata.dur));
+                }
+                if (file.metadata.tmb) {
+                  var maxVal = Array.isArray(file.metadata.tmb) && file.metadata.tmb.length > 0 ? file.metadata.tmb.reduce(function (acc, n) {
+                    return n > acc ? n : acc;
+                  }, -Infinity) : 0;
+                  var dec = maxVal / 100;
+                  peaks = file.metadata.tmb.map(function (peak) {
+                    return peak / dec / 100;
+                  });
+                }
               }
-              if (file.metadata.tmb) {
-                var maxVal = Array.isArray(file.metadata.tmb) && file.metadata.tmb.length > 0 ? file.metadata.tmb.reduce(function (acc, n) {
-                  return n > acc ? n : acc;
-                }, -Infinity) : 0;
-                var dec = maxVal / 100;
-                peaks = file.metadata.tmb.map(function (peak) {
-                  return peak / dec / 100;
-                });
+              wavesurfer.current.load(audioUrl, peaks);
+              wavesurfer.current.on('ready', function () {
+                var _file$metadata, _file$metadata2;
+                var audioDuration = wavesurfer.current.getDuration();
+                setDuration((file === null || file === void 0 ? void 0 : (_file$metadata = file.metadata) === null || _file$metadata === void 0 ? void 0 : _file$metadata.dur) || audioDuration);
+                setCurrentTime(formatAudioVideoTime((file === null || file === void 0 ? void 0 : (_file$metadata2 = file.metadata) === null || _file$metadata2 === void 0 ? void 0 : _file$metadata2.dur) || audioDuration));
+                wavesurfer.current.drawBuffer = function (d) {
+                  log.info('filters --- ', d);
+                };
+              });
+              wavesurfer.current.on('finish', function () {
+                var _file$metadata3, _file$metadata4;
+                setPlayAudio(false);
+                wavesurfer.current.seekTo(0);
+                var audioDuration = wavesurfer.current.getDuration();
+                setDuration((file === null || file === void 0 ? void 0 : (_file$metadata3 = file.metadata) === null || _file$metadata3 === void 0 ? void 0 : _file$metadata3.dur) || audioDuration);
+                setCurrentTime(formatAudioVideoTime((file === null || file === void 0 ? void 0 : (_file$metadata4 = file.metadata) === null || _file$metadata4 === void 0 ? void 0 : _file$metadata4.dur) || audioDuration));
+                setCurrentTimeSeconds(0);
+                if (playingAudioId === file.id) {
+                  dispatch(setPlayingAudioIdAC(null));
+                }
+                clearInterval(intervalRef.current);
+                if (onClose) {
+                  onClose();
+                }
+              });
+              wavesurfer.current.on('pause', function () {
+                setPlayAudio(false);
+                if (playingAudioId === file.id) {
+                  dispatch(setPlayingAudioIdAC(null));
+                }
+                clearInterval(intervalRef.current);
+              });
+              wavesurfer.current.on('interaction', function () {
+                var currentTime = wavesurfer.current.getCurrentTime();
+                setCurrentTime(formatAudioVideoTime(currentTime));
+                setCurrentTimeSeconds(currentTime);
+              });
+              if (url !== '_') {
+                setIsRendered(true);
               }
             }
-            wavesurfer.current.load(url, peaks);
-            wavesurfer.current.on('ready', function () {
-              var audioDuration = wavesurfer.current.getDuration();
-              setDuration(audioDuration);
-              setCurrentTime(formatAudioVideoTime(audioDuration));
-              wavesurfer.current.drawBuffer = function (d) {
-                log.info('filters --- ', d);
-              };
-            });
-            wavesurfer.current.on('finish', function () {
-              setPlayAudio(false);
-              wavesurfer.current.seekTo(0);
-              var audioDuration = wavesurfer.current.getDuration();
-              setDuration(audioDuration);
-              setCurrentTime(formatAudioVideoTime(audioDuration));
-              setCurrentTimeSeconds(0);
-              if (playingAudioId === file.id) {
-                dispatch(setPlayingAudioIdAC(null));
-              }
-              clearInterval(intervalRef.current);
-              if (onClose) {
-                onClose();
-              }
-            });
-            wavesurfer.current.on('pause', function () {
-              setPlayAudio(false);
-              if (playingAudioId === file.id) {
-                dispatch(setPlayingAudioIdAC(null));
+            var audioUrl = url;
+            var needsConversion = isSafari() && url && url !== '_' && (url.endsWith('.mp3') || ((_file$name = file.name) === null || _file$name === void 0 ? void 0 : _file$name.endsWith('.mp3')) || file.type === 'audio/mpeg');
+            var _temp = function () {
+              if (needsConversion) {
+                return _catch(function () {
+                  if (convertedUrlRef.current) {
+                    URL.revokeObjectURL(convertedUrlRef.current);
+                    convertedUrlRef.current = null;
+                  }
+                  var cacheKey = file.id || url;
+                  return Promise.resolve(fetch(url, {
+                    cache: 'no-store'
+                  })).then(function (response) {
+                    if (!response.ok) {
+                      throw new Error("Failed to fetch audio: " + response.statusText);
+                    }
+                    return Promise.resolve(response.blob()).then(function (blob) {
+                      var uniqueFileName = (file.id || Date.now()) + "_" + (file.name || 'audio.mp3');
+                      var audioFile = new File([blob], uniqueFileName, {
+                        type: blob.type || 'audio/mpeg',
+                        lastModified: Date.now()
+                      });
+                      return Promise.resolve(convertAudioForSafari(audioFile, file === null || file === void 0 ? void 0 : file.messageId)).then(function (convertedFile) {
+                        var convertedBlobUrl = URL.createObjectURL(convertedFile);
+                        audioUrl = convertedBlobUrl;
+                        convertedUrlRef.current = convertedBlobUrl;
+                        log.info("Converted audio for Safari: " + cacheKey + " -> " + convertedBlobUrl);
+                      });
+                    });
+                  });
+                }, function (conversionError) {
+                  log.warn('Failed to convert audio for Safari, using original:', conversionError);
+                  audioUrl = url;
+                });
               }
-              clearInterval(intervalRef.current);
-            });
-            wavesurfer.current.on('interaction', function () {
-              var currentTime = wavesurfer.current.getCurrentTime();
-              setCurrentTime(formatAudioVideoTime(currentTime));
-              setCurrentTimeSeconds(currentTime);
-            });
-            if (url !== '_') {
-              setIsRendered(true);
-            }
-          } catch (e) {
+            }();
+            return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+          }, function (e) {
             log.error('Failed to init wavesurfer', e);
-          }
-          return Promise.resolve();
+          }));
         } catch (e) {
           return Promise.reject(e);
         }
@@ -35228,8 +34547,16 @@ var AudioPlayer = function AudioPlayer(_ref) {
     }
     return function () {
       clearInterval(intervalRef.current);
+      if (convertedUrlRef.current) {
+        URL.revokeObjectURL(convertedUrlRef.current);
+        convertedUrlRef.current = null;
+      }
+      if (wavesurfer.current) {
+        wavesurfer.current.destroy();
+        wavesurfer.current = null;
+      }
     };
-  }, [url]);
+  }, [url, file.id]);
   useEffect(function () {
     if (playAudio && playingAudioId && playingAudioId !== "player_" + file.id && wavesurfer.current) {
       setPlayAudio(false);
@@ -35247,8 +34574,8 @@ var AudioPlayer = function AudioPlayer(_ref) {
     iconColor: accentColor
   }))), /*#__PURE__*/React__default.createElement(WaveContainer, null, /*#__PURE__*/React__default.createElement(VisualizationWrapper, null, /*#__PURE__*/React__default.createElement(AudioVisualizationPlaceholder, {
     ref: wavesurferContainer,
-    hidden: !!((_file$metadata = file.metadata) !== null && _file$metadata !== void 0 && _file$metadata.tmb && Array.isArray(file.metadata.tmb))
-  }), ((_file$metadata2 = file.metadata) === null || _file$metadata2 === void 0 ? void 0 : _file$metadata2.tmb) && Array.isArray(file.metadata.tmb) && (/*#__PURE__*/React__default.createElement(AudioVisualization, {
+    hidden: !!((_file$metadata5 = file.metadata) !== null && _file$metadata5 !== void 0 && _file$metadata5.tmb && Array.isArray(file.metadata.tmb))
+  }), ((_file$metadata6 = file.metadata) === null || _file$metadata6 === void 0 ? void 0 : _file$metadata6.tmb) && Array.isArray(file.metadata.tmb) && (/*#__PURE__*/React__default.createElement(AudioVisualization, {
     tmb: file.metadata.tmb,
     duration: duration || file.metadata.dur || 0,
     currentTime: currentTimeSeconds,
@@ -35264,7 +34591,7 @@ var AudioPlayer = function AudioPlayer(_ref) {
     backgroundColor: backgroundSections
   }, audioRate, /*#__PURE__*/React__default.createElement("span", null, "X"))), /*#__PURE__*/React__default.createElement(Timer$1, {
     color: textSecondary
-  }, currentTime || formatAudioVideoTime(((_file$metadata3 = file.metadata) === null || _file$metadata3 === void 0 ? void 0 : _file$metadata3.dur) || 0)));
+  }, currentTime || formatAudioVideoTime(((_file$metadata7 = file.metadata) === null || _file$metadata7 === void 0 ? void 0 : _file$metadata7.dur) || 0)));
 };
 var Container$f = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  width: 230px;\n  padding: 8px 12px;\n  ", "\n  ", "\n"])), function (props) {
   return props.backgroundColor && "background-color: " + props.backgroundColor + ";";
@@ -46316,7 +45643,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     if (activeChannel.id) {
       prevActiveChannelId = activeChannel.id;
     }
-    if (activeChannel.id && membersHasNext === undefined) {
+    if (activeChannel.id && membersHasNext === undefined && !(activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT && activeChannel.memberCount === 2)) {
       dispatch(getMembersAC(activeChannel.id));
     }
     setMentionedUsers([]);
@@ -49949,7 +49276,7 @@ var Members = function Members(_ref) {
       if (getFromContacts) {
         dispatch(getContactsAC());
       }
-      if (channel !== null && channel !== void 0 && channel.id) {
+      if (channel !== null && channel !== void 0 && channel.id && !(channel.type === DEFAULT_CHANNEL_TYPE.DIRECT && channel.memberCount === 2)) {
         dispatch(getMembersAC(channel.id));
       }
     }