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

package/index.modern.js

@@ -12578,12 +12578,14 @@ var ThemeReducer = (function (state, _ref) {
   switch (type) {
     case SET_THEME:
       {
+        console.log('SET_THEME', payload);
         var theme = payload.theme;
         newState.theme = theme;
         return newState;
       }
     case SET_THEME_NEW:
       {
+        console.log('SET_THEME_NEW', payload);
         var _theme = payload.theme;
         newState.newTheme = _theme;
         return newState;
@@ -24399,12 +24401,20 @@ function useOnScreen(ref, rootElement) {
   return isIntersecting;
 }
 
+var newThemeSelector = function newThemeSelector(store) {
+  var _store$ThemeReducer;
+  return store === null || store === void 0 ? void 0 : (_store$ThemeReducer = store.ThemeReducer) === null || _store$ThemeReducer === void 0 ? void 0 : _store$ThemeReducer.newTheme;
+};
+var themeSelector = function themeSelector(store) {
+  var _store$ThemeReducer2;
+  return store === null || store === void 0 ? void 0 : (_store$ThemeReducer2 = store.ThemeReducer) === null || _store$ThemeReducer2 === void 0 ? void 0 : _store$ThemeReducer2.theme;
+};
+
 var useColors = function useColors() {
-  var themeReducer = useSelector(function (state) {
-    return state.ThemeReducer;
-  });
-  var currentThemeMode = (themeReducer === null || themeReducer === void 0 ? void 0 : themeReducer.theme) || defaultThemeMode;
-  var theme = (themeReducer === null || themeReducer === void 0 ? void 0 : themeReducer.newTheme) || defaultTheme;
+  var newTheme = useSelector(newThemeSelector);
+  var themeMode = useSelector(themeSelector);
+  var currentThemeMode = themeMode || defaultThemeMode;
+  var theme = newTheme || defaultTheme;
   return useMemo(function () {
     var colorsWithMode = {};
     Object.keys(theme.colors).forEach(function (colorKey) {
@@ -24544,11 +24554,6 @@ function SvgAvatar(props) {
   })));
 }
 
-var themeSelector = function themeSelector(store) {
-  var _store$ThemeReducer;
-  return store === null || store === void 0 ? void 0 : (_store$ThemeReducer = store.ThemeReducer) === null || _store$ThemeReducer === void 0 ? void 0 : _store$ThemeReducer.theme;
-};
-
 var ATTACHMENTS_CACHE = 'attachments-cache';
 var isBrowser = typeof window !== 'undefined';
 var cacheAvailable;
@@ -25801,7 +25806,6 @@ var ChannelMessageText = function ChannelMessageText(_ref2) {
 var Channel = function Channel(_ref3) {
   var _channel$members, _channel$members$, _channel$members$2;
   var channel = _ref3.channel,
-    theme = _ref3.theme,
     _ref3$showAvatar = _ref3.showAvatar,
     showAvatar = _ref3$showAvatar === void 0 ? true : _ref3$showAvatar,
     avatarBorderRadius = _ref3.avatarBorderRadius,
@@ -25999,7 +26003,6 @@ var Channel = function Channel(_ref3) {
     }
   }, [channel, activeChannel.id, setSelectedChannel]);
   return /*#__PURE__*/React__default.createElement(Container$3, {
-    theme: theme,
     backgroundColor: background,
     selectedChannel: channel.id === activeChannel.id,
     selectedChannelLeftBorder: selectedChannelLeftBorder,
@@ -26027,7 +26030,6 @@ var Channel = function Channel(_ref3) {
     backgroundColor: onlineStatus,
     borderColor: background
   })))), /*#__PURE__*/React__default.createElement(ChannelInfo, {
-    theme: theme,
     avatar: showAvatar,
     isMuted: channel.muted,
     isPinned: !!channel.pinnedAt,
@@ -26308,7 +26310,6 @@ var _templateObject$8, _templateObject2$7, _templateObject3$6, _templateObject4$
 var ContactItem = function ContactItem(_ref) {
   var contact = _ref.contact,
     createChatWithContact = _ref.createChatWithContact,
-    theme = _ref.theme,
     _ref$showAvatar = _ref.showAvatar,
     showAvatar = _ref$showAvatar === void 0 ? true : _ref$showAvatar,
     avatarBorderRadius = _ref.avatarBorderRadius,
@@ -26328,7 +26329,6 @@ var ContactItem = function ContactItem(_ref) {
   var getFromContacts = getShowOnlyContactUsers();
   var contactUserName = makeUsername(contact, undefined, getFromContacts);
   return /*#__PURE__*/React__default.createElement(Container$4, {
-    theme: theme,
     channelsPaddings: channelsPaddings,
     channelsMargin: channelsMargin,
     onClick: function onClick() {
@@ -26346,7 +26346,6 @@ var ContactItem = function ContactItem(_ref) {
     backgroundColor: online,
     borderColor: background
   })))), /*#__PURE__*/React__default.createElement(ChannelInfo$1, {
-    theme: theme,
     avatar: showAvatar,
     subjectFontSize: channelSubjectFontSize,
     subjectLineHeight: channelSubjectLineHeight,
@@ -27137,8 +27136,7 @@ function getRadianAngle(degreeValue) {
 
 var _templateObject$c, _templateObject2$b;
 var ImageCrop = function ImageCrop(_ref) {
-  var theme = _ref.theme,
-    image = _ref.image,
+  var image = _ref.image,
     onAccept = _ref.onAccept,
     handleClosePopup = _ref.handleClosePopup;
   var _useState = useState(null),
@@ -27192,7 +27190,6 @@ var ImageCrop = function ImageCrop(_ref) {
     }
   }, [area]);
   return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
-    theme: theme,
     backgroundColor: background,
     minWidth: '500px',
     maxWidth: '600px',
@@ -27292,7 +27289,6 @@ function CreateChannel(_ref) {
   var uriRegexp = /^[A-Za-z0-9]*$/;
   var fileUploader = useRef(null);
   var uriPrefixRef = useRef(null);
-  var theme = useSelector(themeSelector);
   var _useState = useState(false),
     usersPopupVisible = _useState[0],
     setUsersPopupVisible = _useState[1];
@@ -27543,7 +27539,6 @@ function CreateChannel(_ref) {
     value: subjectValue,
     onChange: handleTypeSubject,
     placeholder: "Enter " + (createGroupChannel ? 'group' : 'channel') + " name",
-    theme: theme,
     color: textPrimary,
     errorColor: warningColor,
     placeholderColor: textFootnote,
@@ -27557,7 +27552,6 @@ function CreateChannel(_ref) {
     value: metadataValue,
     onChange: handleTypeMetadata,
     placeholder: "Enter " + (createGroupChannel ? 'group' : 'channel') + " description",
-    theme: theme,
     color: textPrimary,
     errorColor: warningColor,
     placeholderColor: textFootnote,
@@ -27578,7 +27572,6 @@ function CreateChannel(_ref) {
     onBlur: checkURIRegexp,
     placeholder: 'chan12',
     error: !!wrongUri,
-    theme: theme,
     color: textPrimary,
     errorColor: warningColor,
     placeholderColor: textFootnote,
@@ -27682,7 +27675,6 @@ var DropDown = function DropDown(_ref) {
     watchToggleState = _ref.watchToggleState,
     height = _ref.height,
     children = _ref.children,
-    theme = _ref.theme,
     order = _ref.order,
     zIndex = _ref.zIndex;
   var _useColor = useColors(),
@@ -27735,7 +27727,6 @@ var DropDown = function DropDown(_ref) {
     }
   }, [dropDownState]);
   return /*#__PURE__*/React__default.createElement(DropDownContainer, {
-    theme: theme,
     order: order,
     margin: margin,
     className: 'dropdown-wrapper',
@@ -27765,7 +27756,6 @@ var DropDown = function DropDown(_ref) {
 var _templateObject$f;
 var CreateChannelButton = function CreateChannelButton(_ref) {
   var showSearch = _ref.showSearch,
-    theme = _ref.theme,
     uriPrefixOnCreateChannel = _ref.uriPrefixOnCreateChannel,
     createChannelIcon = _ref.createChannelIcon,
     newChannelIcon = _ref.newChannelIcon,
@@ -27797,7 +27787,6 @@ var CreateChannelButton = function CreateChannelButton(_ref) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropDown, {
     forceClose: showAddMemberPopup || !!showCreateChannel,
     position: 'center',
-    theme: theme,
     zIndex: '300',
     trigger: /*#__PURE__*/React__default.createElement(CreateDropdownButton, {
       hoverBackground: backgroundHovered,
@@ -28203,7 +28192,6 @@ var ChannelList = function ChannelList(_ref) {
     surface2 = _useColor[THEME_COLORS.SURFACE_2];
   var dispatch = useDispatch();
   var getFromContacts = getShowOnlyContactUsers();
-  var theme = useSelector(themeSelector);
   var channelListRef = useRef(null);
   var channelsScrollRef = useRef(null);
   var _useState = useState(''),
@@ -28447,7 +28435,6 @@ var ChannelList = function ChannelList(_ref) {
   })) : ChannelsTitle || /*#__PURE__*/React__default.createElement(ChatsTitle, {
     color: textPrimary
   }, "Chats"), showCreateChannelIcon && (CreateChannel || (/*#__PURE__*/React__default.createElement(CreateChannelButton, {
-    theme: theme,
     newChannelIcon: newChannelIcon,
     newGroupIcon: newGroupIcon,
     newChatIcon: newChatIcon,
@@ -28457,7 +28444,6 @@ var ChannelList = function ChannelList(_ref) {
     uriPrefixOnCreateChannel: uriPrefixOnCreateChannel
   })))), showSearch && searchChannelsPosition === 'bottom' && (/*#__PURE__*/React__default.createElement(ChannelSearch, {
     searchValue: searchValue,
-    theme: theme,
     width: channelSearchWidth,
     borderRadius: searchInputBorderRadius,
     handleSearchValueChange: handleSearchValueChange,
@@ -28478,7 +28464,6 @@ var ChannelList = function ChannelList(_ref) {
       setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
-      theme: theme,
       selectedChannelLeftBorder: selectedChannelLeftBorder,
       selectedChannelBackground: selectedChannelBackground,
       selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -28516,7 +28501,6 @@ var ChannelList = function ChannelList(_ref) {
       setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
-      theme: theme,
       selectedChannelLeftBorder: selectedChannelLeftBorder,
       selectedChannelBackground: selectedChannelBackground,
       selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -28555,7 +28539,6 @@ var ChannelList = function ChannelList(_ref) {
       setSelectedChannel: setSelectedChannel,
       key: contact.id
     })) : (/*#__PURE__*/React__default.createElement(ContactItem, {
-      theme: theme,
       selectedChannelLeftBorder: selectedChannelLeftBorder,
       selectedChannelBackground: selectedChannelBackground,
       selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -28586,7 +28569,6 @@ var ChannelList = function ChannelList(_ref) {
       setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
-      theme: theme,
       selectedChannelLeftBorder: selectedChannelLeftBorder,
       selectedChannelBackground: selectedChannelBackground,
       selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -28637,7 +28619,6 @@ var ChannelList = function ChannelList(_ref) {
       setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
-      theme: theme,
       selectedChannelLeftBorder: selectedChannelLeftBorder,
       selectedChannelBackground: selectedChannelBackground,
       selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -28678,7 +28659,6 @@ var ChannelList = function ChannelList(_ref) {
       setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
-      theme: theme,
       selectedChannelLeftBorder: selectedChannelLeftBorder,
       selectedChannelBackground: selectedChannelBackground,
       selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -28716,7 +28696,6 @@ var ChannelList = function ChannelList(_ref) {
       setSelectedChannel: setSelectedChannel,
       key: channel.id
     })) : (/*#__PURE__*/React__default.createElement(Channel, {
-      theme: theme,
       selectedChannelLeftBorder: selectedChannelLeftBorder,
       selectedChannelBackground: selectedChannelBackground,
       selectedChannelBorderRadius: selectedChannelBorderRadius,
@@ -28982,7 +28961,6 @@ function ChatHeader(_ref) {
   var user = ChatClient.user;
   var getFromContacts = getShowOnlyContactUsers();
   var activeChannel = useSelector(activeChannelSelector);
-  var theme = useSelector(themeSelector);
   var showChannelDetails = getShowChannelDetails();
   var channelListHidden = useSelector(channelListHiddenSelector);
   var channelDetailsIsOpen = useSelector(channelInfoIsOpenSelector, shallowEqual);
@@ -29040,7 +29018,6 @@ function ChatHeader(_ref) {
     setDefaultAvatar: isDirectChannel
   }))), /*#__PURE__*/React__default.createElement(ChannelName, null, /*#__PURE__*/React__default.createElement(SectionHeader, {
     color: titleColor || textPrimary,
-    theme: theme,
     fontSize: titleFontSize,
     uppercase: directChannelUser && hideUserPresence && hideUserPresence(directChannelUser),
     lineHeight: titleLineHeight
@@ -29308,7 +29285,6 @@ function MessageDivider(_ref) {
     newMessagesSeparatorSpaceColor = _ref.newMessagesSeparatorSpaceColor,
     noMargin = _ref.noMargin,
     marginTop = _ref.marginTop,
-    theme = _ref.theme,
     marginBottom = _ref.marginBottom,
     chatBackgroundColor = _ref.chatBackgroundColor;
   var _useColor = useColors(),
@@ -29326,7 +29302,6 @@ function MessageDivider(_ref) {
   }, [textRef]);
   return /*#__PURE__*/React__default.createElement(Container$a, {
     className: unread ? 'unread' : 'divider',
-    theme: theme,
     marginTop: marginTop,
     dividerVisibility: !visibility || unread,
     dateDividerFontSize: dateDividerFontSize || newMessagesSeparatorFontSize,
@@ -30297,7 +30272,6 @@ var _templateObject$p, _templateObject2$m;
 function ConfirmPopup(_ref) {
   var title = _ref.title,
     description = _ref.description,
-    theme = _ref.theme,
     buttonText = _ref.buttonText,
     buttonTextColor = _ref.buttonTextColor,
     buttonBackground = _ref.buttonBackground,
@@ -30342,7 +30316,6 @@ function ConfirmPopup(_ref) {
     setInitialRender(false);
   }, []);
   return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
-    theme: theme,
     backgroundColor: background,
     maxWidth: '520px',
     minWidth: '520px',
@@ -32214,15 +32187,16 @@ class EventEmitter {
         if (!this.listeners[event]) {
             this.listeners[event] = new Set();
         }
-        this.listeners[event].add(listener);
         if (options === null || options === void 0 ? void 0 : options.once) {
-            const unsubscribeOnce = () => {
-                this.un(event, unsubscribeOnce);
-                this.un(event, listener);
+            // Create a wrapper that removes itself after being called once
+            const onceWrapper = (...args) => {
+                this.un(event, onceWrapper);
+                listener(...args);
             };
-            this.on(event, unsubscribeOnce);
-            return unsubscribeOnce;
+            this.listeners[event].add(onceWrapper);
+            return () => this.un(event, onceWrapper);
         }
+        this.listeners[event].add(listener);
         return () => this.un(event, listener);
     }
     /** Unsubscribe from an event */
@@ -32292,8 +32266,13 @@ var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _argume
 function decode(audioData, sampleRate) {
     return __awaiter(this, void 0, void 0, function* () {
         const audioCtx = new AudioContext({ sampleRate });
-        const decode = audioCtx.decodeAudioData(audioData);
-        return decode.finally(() => audioCtx.close());
+        try {
+            return yield audioCtx.decodeAudioData(audioData);
+        }
+        finally {
+            // Ensure AudioContext is always closed, even on synchronous errors
+            audioCtx.close();
+        }
     });
 }
 /** Normalize peaks to -1..1 */
@@ -32317,17 +32296,36 @@ function normalize(channelData) {
 }
 /** Create an audio buffer from pre-decoded audio data */
 function createBuffer(channelData, duration) {
+    // Validate inputs
+    if (!channelData || channelData.length === 0) {
+        throw new Error('channelData must be a non-empty array');
+    }
+    if (duration <= 0) {
+        throw new Error('duration must be greater than 0');
+    }
     // If a single array of numbers is passed, make it an array of arrays
     if (typeof channelData[0] === 'number')
         channelData = [channelData];
+    // Validate channel data after conversion
+    if (!channelData[0] || channelData[0].length === 0) {
+        throw new Error('channelData must contain non-empty channel arrays');
+    }
     // Normalize to -1..1
     normalize(channelData);
+    // Convert to Float32Array for consistency
+    const float32Channels = channelData.map((channel) => channel instanceof Float32Array ? channel : Float32Array.from(channel));
     return {
         duration,
-        length: channelData[0].length,
-        sampleRate: channelData[0].length / duration,
-        numberOfChannels: channelData.length,
-        getChannelData: (i) => channelData === null || channelData === void 0 ? void 0 : channelData[i],
+        length: float32Channels[0].length,
+        sampleRate: float32Channels[0].length / duration,
+        numberOfChannels: float32Channels.length,
+        getChannelData: (i) => {
+            const channel = float32Channels[i];
+            if (!channel) {
+                throw new Error(`Channel ${i} not found`);
+            }
+            return channel;
+        },
         copyFromChannel: AudioBuffer.prototype.copyFromChannel,
         copyToChannel: AudioBuffer.prototype.copyToChannel,
     };
@@ -32396,28 +32394,26 @@ function watchProgress(response, progressCallback) {
         const contentLength = Number(response.headers.get('Content-Length')) || 0;
         let receivedLength = 0;
         // Process the data
-        const processChunk = (value) => __awaiter$1(this, void 0, void 0, function* () {
+        const processChunk = (value) => {
             // Add to the received length
             receivedLength += (value === null || value === void 0 ? void 0 : value.length) || 0;
             const percentage = Math.round((receivedLength / contentLength) * 100);
             progressCallback(percentage);
-        });
-        const read = () => __awaiter$1(this, void 0, void 0, function* () {
-            let data;
-            try {
-                data = yield reader.read();
-            }
-            catch (_a) {
-                // Ignore errors because we can only handle the main response
-                return;
-            }
-            // Continue reading data until done
-            if (!data.done) {
+        };
+        // Use iteration instead of recursion to avoid stack issues
+        try {
+            while (true) {
+                const data = yield reader.read();
+                if (data.done) {
+                    break;
+                }
                 processChunk(data.value);
-                yield read();
             }
-        });
-        read();
+        }
+        catch (err) {
+            // Ignore errors because we can only handle the main response
+            console.warn('Progress tracking error:', err);
+        }
     });
 }
 function fetchBlob(url, progressCallback, requestInit) {
@@ -32436,6 +32432,121 @@ const Fetcher = {
     fetchBlob,
 };
 
+/**
+ * Reactive primitives for managing state in WaveSurfer
+ *
+ * This module provides signal-based reactivity similar to SolidJS signals.
+ * Signals are reactive values that notify subscribers when they change.
+ */
+/**
+ * Create a reactive signal that notifies subscribers when its value changes
+ *
+ * @example
+ * ```typescript
+ * const count = signal(0)
+ * count.subscribe(val => console.log('Count:', val))
+ * count.set(5) // Logs: Count: 5
+ * ```
+ */
+function signal(initialValue) {
+    let _value = initialValue;
+    const subscribers = new Set();
+    return {
+        get value() {
+            return _value;
+        },
+        set(newValue) {
+            // Only update and notify if value actually changed
+            if (!Object.is(_value, newValue)) {
+                _value = newValue;
+                subscribers.forEach((fn) => fn(_value));
+            }
+        },
+        update(fn) {
+            this.set(fn(_value));
+        },
+        subscribe(callback) {
+            subscribers.add(callback);
+            return () => subscribers.delete(callback);
+        },
+    };
+}
+/**
+ * Create a computed value that automatically updates when its dependencies change
+ *
+ * @example
+ * ```typescript
+ * const count = signal(0)
+ * const doubled = computed(() => count.value * 2, [count])
+ * console.log(doubled.value) // 0
+ * count.set(5)
+ * console.log(doubled.value) // 10
+ * ```
+ */
+function computed(fn, dependencies) {
+    const result = signal(fn());
+    // Subscribe to all dependencies immediately
+    // This ensures the computed value stays in sync even if no one is subscribed to it
+    dependencies.forEach((dep) => dep.subscribe(() => {
+        const newValue = fn();
+        // Update the result signal, which will notify our subscribers if value changed
+        if (!Object.is(result.value, newValue)) {
+            result.set(newValue);
+        }
+    }));
+    // Return a read-only signal that proxies the result
+    return {
+        get value() {
+            return result.value;
+        },
+        subscribe(callback) {
+            // Just subscribe to result changes
+            return result.subscribe(callback);
+        },
+    };
+}
+/**
+ * Run a side effect automatically when dependencies change
+ *
+ * @param fn - Effect function. Can return a cleanup function.
+ * @param dependencies - Signals that trigger the effect when they change
+ * @returns Unsubscribe function that stops the effect and runs cleanup
+ *
+ * @example
+ * ```typescript
+ * const count = signal(0)
+ * effect(() => {
+ *   console.log('Count is:', count.value)
+ *   return () => console.log('Cleanup')
+ * }, [count])
+ * count.set(5) // Logs: Cleanup, Count is: 5
+ * ```
+ */
+function effect(fn, dependencies) {
+    let cleanup;
+    const run = () => {
+        // Run cleanup from previous execution
+        if (cleanup) {
+            cleanup();
+            cleanup = undefined;
+        }
+        // Run effect and capture new cleanup
+        cleanup = fn();
+    };
+    // Subscribe to all dependencies
+    const unsubscribes = dependencies.map((dep) => dep.subscribe(run));
+    // Run effect immediately
+    run();
+    // Return function that unsubscribes and runs cleanup
+    return () => {
+        if (cleanup) {
+            cleanup();
+            cleanup = undefined;
+        }
+        unsubscribes.forEach((unsub) => unsub());
+    };
+}
+
 var __awaiter$2 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -32446,9 +32557,33 @@ var __awaiter$2 = (undefined && undefined.__awaiter) || function (thisArg, _argu
     });
 };
 class Player extends EventEmitter {
+    // Expose reactive state as writable signals
+    // These are writable to allow WaveSurfer to compose them into centralized state
+    get isPlayingSignal() {
+        return this._isPlaying;
+    }
+    get currentTimeSignal() {
+        return this._currentTime;
+    }
+    get durationSignal() {
+        return this._duration;
+    }
+    get volumeSignal() {
+        return this._volume;
+    }
+    get mutedSignal() {
+        return this._muted;
+    }
+    get playbackRateSignal() {
+        return this._playbackRate;
+    }
+    get seekingSignal() {
+        return this._seeking;
+    }
     constructor(options) {
         super();
         this.isExternalMedia = false;
+        this.reactiveMediaEventCleanups = [];
         if (options.media) {
             this.media = options.media;
             this.isExternalMedia = true;
@@ -32456,6 +32591,16 @@ class Player extends EventEmitter {
         else {
             this.media = document.createElement('audio');
         }
+        // Initialize reactive state
+        this._isPlaying = signal(false);
+        this._currentTime = signal(0);
+        this._duration = signal(0);
+        this._volume = signal(this.media.volume);
+        this._muted = signal(this.media.muted);
+        this._playbackRate = signal(this.media.playbackRate || 1);
+        this._seeking = signal(false);
+        // Setup reactive media event handlers
+        this.setupReactiveMediaEvents();
         // Controls
         if (options.mediaControls) {
             this.media.controls = true;
@@ -32473,6 +32618,48 @@ class Player extends EventEmitter {
             }, { once: true });
         }
     }
+    /**
+     * Setup reactive media event handlers that update signals
+     * This bridges the imperative HTMLMediaElement API to reactive state
+     */
+    setupReactiveMediaEvents() {
+        // Playing state
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('play', () => {
+            this._isPlaying.set(true);
+        }));
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('pause', () => {
+            this._isPlaying.set(false);
+        }));
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('ended', () => {
+            this._isPlaying.set(false);
+        }));
+        // Time tracking
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('timeupdate', () => {
+            this._currentTime.set(this.media.currentTime);
+        }));
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('durationchange', () => {
+            this._duration.set(this.media.duration || 0);
+        }));
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('loadedmetadata', () => {
+            this._duration.set(this.media.duration || 0);
+        }));
+        // Seeking state
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('seeking', () => {
+            this._seeking.set(true);
+        }));
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('seeked', () => {
+            this._seeking.set(false);
+        }));
+        // Volume and muted
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('volumechange', () => {
+            this._volume.set(this.media.volume);
+            this._muted.set(this.media.muted);
+        }));
+        // Playback rate
+        this.reactiveMediaEventCleanups.push(this.onMediaEvent('ratechange', () => {
+            this._playbackRate.set(this.media.playbackRate);
+        }));
+    }
     onMediaEvent(event, callback, options) {
         this.media.addEventListener(event, callback, options);
         return () => this.media.removeEventListener(event, callback, options);
@@ -32509,17 +32696,27 @@ class Player extends EventEmitter {
         }
     }
     destroy() {
+        // Cleanup reactive media event listeners
+        this.reactiveMediaEventCleanups.forEach((cleanup) => cleanup());
+        this.reactiveMediaEventCleanups = [];
         if (this.isExternalMedia)
             return;
         this.media.pause();
-        this.media.remove();
         this.revokeSrc();
         this.media.removeAttribute('src');
         // Load resets the media element to its initial state
         this.media.load();
+        // Remove from DOM after cleanup
+        this.media.remove();
     }
     setMediaElement(element) {
+        // Cleanup reactive event listeners from old media element
+        this.reactiveMediaEventCleanups.forEach((cleanup) => cleanup());
+        this.reactiveMediaEventCleanups = [];
+        // Set new media element
         this.media = element;
+        // Reinitialize reactive event listeners on new media element
+        this.setupReactiveMediaEvents();
     }
     /** Start playing the audio */
     play() {
@@ -32599,23 +32796,312 @@ class Player extends EventEmitter {
     }
 }
 
-function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mouseButton = 0, touchDelay = 100) {
-    if (!element)
-        return () => void 0;
+const DEFAULT_HEIGHT = 128;
+const MAX_CANVAS_WIDTH = 8000;
+const MAX_NODES = 10;
+function clampToUnit(value) {
+    if (value < 0)
+        return 0;
+    if (value > 1)
+        return 1;
+    return value;
+}
+function calculateBarRenderConfig({ width, height, length, options, pixelRatio, }) {
+    const halfHeight = height / 2;
+    const barWidth = options.barWidth ? options.barWidth * pixelRatio : 1;
+    const barGap = options.barGap ? options.barGap * pixelRatio : options.barWidth ? barWidth / 2 : 0;
+    const barRadius = options.barRadius || 0;
+    const barMinHeight = options.barMinHeight ? options.barMinHeight * pixelRatio : 0;
+    const spacing = barWidth + barGap || 1;
+    const barIndexScale = length > 0 ? width / spacing / length : 0;
+    return {
+        halfHeight,
+        barWidth,
+        barGap,
+        barRadius,
+        barMinHeight,
+        barIndexScale,
+        barSpacing: spacing,
+    };
+}
+function calculateBarHeights({ maxTop, maxBottom, halfHeight, vScale, barMinHeight = 0, barAlign, }) {
+    let topHeight = Math.round(maxTop * halfHeight * vScale);
+    const bottomHeight = Math.round(maxBottom * halfHeight * vScale);
+    let totalHeight = topHeight + bottomHeight || 1;
+    if (totalHeight < barMinHeight) {
+        totalHeight = barMinHeight;
+        if (!barAlign) {
+            topHeight = totalHeight / 2;
+        }
+    }
+    return { topHeight, totalHeight };
+}
+function resolveBarYPosition({ barAlign, halfHeight, topHeight, totalHeight, canvasHeight, }) {
+    if (barAlign === 'top')
+        return 0;
+    if (barAlign === 'bottom')
+        return canvasHeight - totalHeight;
+    return halfHeight - topHeight;
+}
+function calculateBarSegments({ channelData, barIndexScale, barSpacing, barWidth, halfHeight, vScale, canvasHeight, barAlign, barMinHeight, }) {
+    const topChannel = channelData[0] || [];
+    const bottomChannel = channelData[1] || topChannel;
+    const length = topChannel.length;
+    const segments = [];
+    let prevX = 0;
+    let maxTop = 0;
+    let maxBottom = 0;
+    for (let i = 0; i <= length; i++) {
+        const x = Math.round(i * barIndexScale);
+        if (x > prevX) {
+            const { topHeight, totalHeight } = calculateBarHeights({
+                maxTop,
+                maxBottom,
+                halfHeight,
+                vScale,
+                barMinHeight,
+                barAlign,
+            });
+            const y = resolveBarYPosition({
+                barAlign,
+                halfHeight,
+                topHeight,
+                totalHeight,
+                canvasHeight,
+            });
+            segments.push({
+                x: prevX * barSpacing,
+                y,
+                width: barWidth,
+                height: totalHeight,
+            });
+            prevX = x;
+            maxTop = 0;
+            maxBottom = 0;
+        }
+        const magnitudeTop = Math.abs(topChannel[i] || 0);
+        const magnitudeBottom = Math.abs(bottomChannel[i] || 0);
+        if (magnitudeTop > maxTop)
+            maxTop = magnitudeTop;
+        if (magnitudeBottom > maxBottom)
+            maxBottom = magnitudeBottom;
+    }
+    return segments;
+}
+function getRelativePointerPosition(rect, clientX, clientY) {
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
+    const relativeX = x / rect.width;
+    const relativeY = y / rect.height;
+    return [relativeX, relativeY];
+}
+function resolveChannelHeight({ optionsHeight, optionsSplitChannels, parentHeight, numberOfChannels, defaultHeight = DEFAULT_HEIGHT, }) {
+    if (optionsHeight == null)
+        return defaultHeight;
+    const numericHeight = Number(optionsHeight);
+    if (!isNaN(numericHeight))
+        return numericHeight;
+    if (optionsHeight === 'auto') {
+        const height = parentHeight || defaultHeight;
+        if (optionsSplitChannels === null || optionsSplitChannels === void 0 ? void 0 : optionsSplitChannels.every((channel) => !channel.overlay)) {
+            return height / numberOfChannels;
+        }
+        return height;
+    }
+    return defaultHeight;
+}
+function getPixelRatio(devicePixelRatio) {
+    return Math.max(1, devicePixelRatio || 1);
+}
+function shouldRenderBars(options) {
+    return Boolean(options.barWidth || options.barGap || options.barAlign);
+}
+function resolveColorValue(color, devicePixelRatio, canvasHeight) {
+    if (!Array.isArray(color))
+        return color || '';
+    if (color.length === 0)
+        return '#999';
+    if (color.length < 2)
+        return color[0] || '';
+    const canvasElement = document.createElement('canvas');
+    const ctx = canvasElement.getContext('2d');
+    const gradientHeight = canvasHeight !== null && canvasHeight !== void 0 ? canvasHeight : canvasElement.height * devicePixelRatio;
+    const gradient = ctx.createLinearGradient(0, 0, 0, gradientHeight || devicePixelRatio);
+    const colorStopPercentage = 1 / (color.length - 1);
+    color.forEach((value, index) => {
+        gradient.addColorStop(index * colorStopPercentage, value);
+    });
+    return gradient;
+}
+function calculateWaveformLayout({ duration, minPxPerSec = 0, parentWidth, fillParent, pixelRatio, }) {
+    const scrollWidth = Math.ceil(duration * minPxPerSec);
+    const isScrollable = scrollWidth > parentWidth;
+    const useParentWidth = Boolean(fillParent && !isScrollable);
+    const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;
+    return {
+        scrollWidth,
+        isScrollable,
+        useParentWidth,
+        width,
+    };
+}
+function clampWidthToBarGrid(width, options) {
+    if (!shouldRenderBars(options))
+        return width;
+    const barWidth = options.barWidth || 0.5;
+    const barGap = options.barGap || barWidth / 2;
+    const totalBarWidth = barWidth + barGap;
+    if (totalBarWidth === 0)
+        return width;
+    return Math.floor(width / totalBarWidth) * totalBarWidth;
+}
+function calculateSingleCanvasWidth({ clientWidth, totalWidth, options, }) {
+    const baseWidth = Math.min(MAX_CANVAS_WIDTH, clientWidth, totalWidth);
+    return clampWidthToBarGrid(baseWidth, options);
+}
+function sliceChannelData({ channelData, offset, clampedWidth, totalWidth, }) {
+    return channelData.map((channel) => {
+        const start = Math.floor((offset / totalWidth) * channel.length);
+        const end = Math.floor(((offset + clampedWidth) / totalWidth) * channel.length);
+        return channel.slice(start, end);
+    });
+}
+function shouldClearCanvases(currentNodeCount) {
+    return currentNodeCount > MAX_NODES;
+}
+function getLazyRenderRange({ scrollLeft, totalWidth, numCanvases, }) {
+    if (totalWidth === 0)
+        return [0];
+    const viewPosition = scrollLeft / totalWidth;
+    const startCanvas = Math.floor(viewPosition * numCanvases);
+    return [startCanvas - 1, startCanvas, startCanvas + 1];
+}
+function calculateVerticalScale({ channelData, barHeight, normalize, maxPeak, }) {
+    var _a;
+    const baseScale = barHeight || 1;
+    if (!normalize)
+        return baseScale;
+    const firstChannel = channelData[0];
+    if (!firstChannel || firstChannel.length === 0)
+        return baseScale;
+    // Use fixed max peak if provided, otherwise calculate from data
+    let max = maxPeak !== null && maxPeak !== void 0 ? maxPeak : 0;
+    if (!maxPeak) {
+        for (let i = 0; i < firstChannel.length; i++) {
+            const value = (_a = firstChannel[i]) !== null && _a !== void 0 ? _a : 0;
+            const magnitude = Math.abs(value);
+            if (magnitude > max)
+                max = magnitude;
+        }
+    }
+    if (!max)
+        return baseScale;
+    return baseScale / max;
+}
+function calculateLinePaths({ channelData, width, height, vScale, }) {
+    const halfHeight = height / 2;
+    const primaryChannel = channelData[0] || [];
+    const secondaryChannel = channelData[1] || primaryChannel;
+    const channels = [primaryChannel, secondaryChannel];
+    return channels.map((channel, index) => {
+        const length = channel.length;
+        const hScale = length ? width / length : 0;
+        const baseY = halfHeight;
+        const direction = index === 0 ? -1 : 1;
+        const path = [{ x: 0, y: baseY }];
+        let prevX = 0;
+        let max = 0;
+        for (let i = 0; i <= length; i++) {
+            const x = Math.round(i * hScale);
+            if (x > prevX) {
+                const heightDelta = Math.round(max * halfHeight * vScale) || 1;
+                const y = baseY + heightDelta * direction;
+                path.push({ x: prevX, y });
+                prevX = x;
+                max = 0;
+            }
+            const value = Math.abs(channel[i] || 0);
+            if (value > max)
+                max = value;
+        }
+        path.push({ x: prevX, y: baseY });
+        return path;
+    });
+}
+function roundToHalfAwayFromZero(value) {
+    const scaled = value * 2;
+    const rounded = scaled < 0 ? Math.floor(scaled) : Math.ceil(scaled);
+    return rounded / 2;
+}
+
+/**
+ * Event stream utilities for converting DOM events to reactive signals
+ *
+ * These utilities allow composing event handling using reactive primitives.
+ */
+/**
+ * Cleanup a stream created with event stream utilities
+ *
+ * This removes event listeners and unsubscribes from sources.
+ */
+function cleanup(stream) {
+    const cleanupFn = stream._cleanup;
+    if (typeof cleanupFn === 'function') {
+        cleanupFn();
+    }
+}
+
+/**
+ * Reactive drag stream utilities
+ *
+ * Provides declarative drag handling using reactive streams.
+ * Automatically handles mouseup cleanup and supports constraints.
+ */
+/**
+ * Create a reactive drag stream from an element
+ *
+ * Emits drag events (start, move, end) as the user drags the element.
+ * Automatically handles pointer capture, multi-touch prevention, and cleanup.
+ *
+ * @example
+ * ```typescript
+ * const dragSignal = createDragStream(element)
+ *
+ * effect(() => {
+ *   const drag = dragSignal.value
+ *   if (drag?.type === 'move') {
+ *     console.log('Dragging:', drag.deltaX, drag.deltaY)
+ *   }
+ * }, [dragSignal])
+ * ```
+ *
+ * @param element - Element to make draggable
+ * @param options - Drag configuration options
+ * @returns Signal emitting drag events and cleanup function
+ */
+function createDragStream(element, options = {}) {
+    const { threshold = 3, mouseButton = 0, touchDelay = 100 } = options;
+    const dragSignal = signal(null);
+    const activePointers = new Map();
     const isTouchDevice = matchMedia('(pointer: coarse)').matches;
     let unsubscribeDocument = () => void 0;
     const onPointerDown = (event) => {
         if (event.button !== mouseButton)
             return;
-        event.preventDefault();
-        event.stopPropagation();
+        activePointers.set(event.pointerId, event);
+        if (activePointers.size > 1) {
+            return;
+        }
         let startX = event.clientX;
         let startY = event.clientY;
         let isDragging = false;
         const touchStartTime = Date.now();
+        const rect = element.getBoundingClientRect();
+        const { left, top } = rect;
         const onPointerMove = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
+            if (event.defaultPrevented || activePointers.size > 1) {
+                return;
+            }
             if (isTouchDevice && Date.now() - touchStartTime < touchDelay)
                 return;
             const x = event.clientX;
@@ -32623,29 +33109,45 @@ function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mouseButt
             const dx = x - startX;
             const dy = y - startY;
             if (isDragging || Math.abs(dx) > threshold || Math.abs(dy) > threshold) {
-                const rect = element.getBoundingClientRect();
-                const { left, top } = rect;
+                event.preventDefault();
+                event.stopPropagation();
                 if (!isDragging) {
-                    onStart === null || onStart === void 0 ? void 0 : onStart(startX - left, startY - top);
+                    // Emit start event
+                    dragSignal.set({
+                        type: 'start',
+                        x: startX - left,
+                        y: startY - top,
+                    });
                     isDragging = true;
                 }
-                onDrag(dx, dy, x - left, y - top);
+                // Emit move event
+                dragSignal.set({
+                    type: 'move',
+                    x: x - left,
+                    y: y - top,
+                    deltaX: dx,
+                    deltaY: dy,
+                });
                 startX = x;
                 startY = y;
             }
         };
         const onPointerUp = (event) => {
+            activePointers.delete(event.pointerId);
             if (isDragging) {
                 const x = event.clientX;
                 const y = event.clientY;
-                const rect = element.getBoundingClientRect();
-                const { left, top } = rect;
-                onEnd === null || onEnd === void 0 ? void 0 : onEnd(x - left, y - top);
+                // Emit end event
+                dragSignal.set({
+                    type: 'end',
+                    x: x - left,
+                    y: y - top,
+                });
             }
             unsubscribeDocument();
         };
         const onPointerLeave = (e) => {
-            // Listen to events only on the document and not on inner elements
+            activePointers.delete(e.pointerId);
             if (!e.relatedTarget || e.relatedTarget === document.documentElement) {
                 onPointerUp(e);
             }
@@ -32657,6 +33159,9 @@ function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mouseButt
             }
         };
         const onTouchMove = (event) => {
+            if (event.defaultPrevented || activePointers.size > 1) {
+                return;
+            }
             if (isDragging) {
                 event.preventDefault();
             }
@@ -32679,9 +33184,114 @@ function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mouseButt
         };
     };
     element.addEventListener('pointerdown', onPointerDown);
-    return () => {
+    const cleanupFn = () => {
         unsubscribeDocument();
         element.removeEventListener('pointerdown', onPointerDown);
+        activePointers.clear();
+        cleanup(dragSignal);
+    };
+    return {
+        signal: dragSignal,
+        cleanup: cleanupFn,
+    };
+}
+
+/**
+ * Reactive scroll stream utilities
+ *
+ * Provides declarative scroll handling using reactive streams.
+ * Automatically handles scroll event optimization and cleanup.
+ */
+// ============================================================================
+// Pure Scroll Calculation Functions
+// ============================================================================
+/**
+ * Calculate visible percentages from scroll data
+ * Pure function - no side effects
+ *
+ * @param scrollData - Current scroll dimensions
+ * @returns Start and end positions as percentages (0-1)
+ */
+function calculateScrollPercentages(scrollData) {
+    const { scrollLeft, scrollWidth, clientWidth } = scrollData;
+    if (scrollWidth === 0) {
+        return { startX: 0, endX: 1 };
+    }
+    const startX = scrollLeft / scrollWidth;
+    const endX = (scrollLeft + clientWidth) / scrollWidth;
+    return {
+        startX: Math.max(0, Math.min(1, startX)),
+        endX: Math.max(0, Math.min(1, endX)),
+    };
+}
+/**
+ * Calculate scroll bounds in pixels
+ * Pure function - no side effects
+ *
+ * @param scrollData - Current scroll dimensions
+ * @returns Left and right scroll bounds in pixels
+ */
+function calculateScrollBounds(scrollData) {
+    return {
+        left: scrollData.scrollLeft,
+        right: scrollData.scrollLeft + scrollData.clientWidth,
+    };
+}
+/**
+ * Create a reactive scroll stream from an element
+ *
+ * Emits scroll data as the user scrolls the element.
+ * Automatically computes derived values (percentages, bounds).
+ *
+ * @example
+ * ```typescript
+ * const scrollStream = createScrollStream(container)
+ *
+ * effect(() => {
+ *   const { startX, endX } = scrollStream.percentages.value
+ *   console.log('Visible:', startX, 'to', endX)
+ * }, [scrollStream.percentages])
+ *
+ * scrollStream.cleanup()
+ * ```
+ *
+ * @param element - Scrollable element
+ * @returns Scroll stream with signals and cleanup
+ */
+function createScrollStream(element) {
+    // Create signals
+    const scrollData = signal({
+        scrollLeft: element.scrollLeft,
+        scrollWidth: element.scrollWidth,
+        clientWidth: element.clientWidth,
+    });
+    // Computed derived values
+    const percentages = computed(() => {
+        return calculateScrollPercentages(scrollData.value);
+    }, [scrollData]);
+    const bounds = computed(() => {
+        return calculateScrollBounds(scrollData.value);
+    }, [scrollData]);
+    // Update scroll data on scroll event
+    const onScroll = () => {
+        scrollData.set({
+            scrollLeft: element.scrollLeft,
+            scrollWidth: element.scrollWidth,
+            clientWidth: element.clientWidth,
+        });
+    };
+    // Attach scroll listener
+    element.addEventListener('scroll', onScroll, { passive: true });
+    // Cleanup function
+    const cleanupFn = () => {
+        element.removeEventListener('scroll', onScroll);
+        cleanup(scrollData);
+    };
+    return {
+        scrollData,
+        percentages,
+        bounds,
+        cleanup: cleanupFn,
     };
 }
 
@@ -32716,6 +33326,8 @@ class Renderer extends EventEmitter {
         this.isDragging = false;
         this.subscriptions = [];
         this.unsubscribeOnScroll = [];
+        this.dragStream = null;
+        this.scrollStream = null;
         this.subscriptions = [];
         this.options = options;
         const parent = this.parentFromOptionsContainer(options.container);
@@ -32747,35 +33359,30 @@ class Renderer extends EventEmitter {
         return parent;
     }
     initEvents() {
-        const getClickPosition = (e) => {
-            const rect = this.wrapper.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
-            const relativeX = x / rect.width;
-            const relativeY = y / rect.height;
-            return [relativeX, relativeY];
-        };
         // Add a click listener
         this.wrapper.addEventListener('click', (e) => {
-            const [x, y] = getClickPosition(e);
+            const rect = this.wrapper.getBoundingClientRect();
+            const [x, y] = getRelativePointerPosition(rect, e.clientX, e.clientY);
             this.emit('click', x, y);
         });
         // Add a double click listener
         this.wrapper.addEventListener('dblclick', (e) => {
-            const [x, y] = getClickPosition(e);
+            const rect = this.wrapper.getBoundingClientRect();
+            const [x, y] = getRelativePointerPosition(rect, e.clientX, e.clientY);
             this.emit('dblclick', x, y);
         });
         // Drag
         if (this.options.dragToSeek === true || typeof this.options.dragToSeek === 'object') {
             this.initDrag();
         }
-        // Add a scroll listener
-        this.scrollContainer.addEventListener('scroll', () => {
-            const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
-            const startX = scrollLeft / scrollWidth;
-            const endX = (scrollLeft + clientWidth) / scrollWidth;
-            this.emit('scroll', startX, endX, scrollLeft, scrollLeft + clientWidth);
-        });
+        // Add a scroll listener using reactive stream
+        this.scrollStream = createScrollStream(this.scrollContainer);
+        const unsubscribeScroll = effect(() => {
+            const { startX, endX } = this.scrollStream.percentages.value;
+            const { left, right } = this.scrollStream.bounds.value;
+            this.emit('scroll', startX, endX, left, right);
+        }, [this.scrollStream.percentages, this.scrollStream.bounds]);
+        this.subscriptions.push(unsubscribeScroll);
         // Re-render the waveform on container resize
         if (typeof ResizeObserver === 'function') {
             const delay = this.createDelay(100);
@@ -32793,39 +33400,32 @@ class Renderer extends EventEmitter {
             return;
         this.lastContainerWidth = width;
         this.reRender();
+        this.emit('resize');
     }
     initDrag() {
-        this.subscriptions.push(makeDraggable(this.wrapper, 
-        // On drag
-        (_, __, x) => {
-            this.emit('drag', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
-        }, 
-        // On start drag
-        (x) => {
-            this.isDragging = true;
-            this.emit('dragstart', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
-        }, 
-        // On end drag
-        (x) => {
-            this.isDragging = false;
-            this.emit('dragend', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
-        }));
-    }
-    getHeight(optionsHeight, optionsSplitChannel) {
-        var _a;
-        const defaultHeight = 128;
-        const numberOfChannels = ((_a = this.audioData) === null || _a === void 0 ? void 0 : _a.numberOfChannels) || 1;
-        if (optionsHeight == null)
-            return defaultHeight;
-        if (!isNaN(Number(optionsHeight)))
-            return Number(optionsHeight);
-        if (optionsHeight === 'auto') {
-            const height = this.parent.clientHeight || defaultHeight;
-            if (optionsSplitChannel === null || optionsSplitChannel === void 0 ? void 0 : optionsSplitChannel.every((channel) => !channel.overlay))
-                return height / numberOfChannels;
-            return height;
-        }
-        return defaultHeight;
+        // Don't initialize drag if it's already set up
+        if (this.dragStream)
+            return;
+        this.dragStream = createDragStream(this.wrapper);
+        const unsubscribeDrag = effect(() => {
+            const drag = this.dragStream.signal.value;
+            if (!drag)
+                return;
+            const width = this.wrapper.getBoundingClientRect().width;
+            const relX = clampToUnit(drag.x / width);
+            if (drag.type === 'start') {
+                this.isDragging = true;
+                this.emit('dragstart', relX);
+            }
+            else if (drag.type === 'move') {
+                this.emit('drag', relX);
+            }
+            else if (drag.type === 'end') {
+                this.isDragging = false;
+                this.emit('dragend', relX);
+            }
+        }, [this.dragStream.signal]);
+        this.subscriptions.push(unsubscribeDrag);
     }
     initHtml() {
         const div = document.createElement('div');
@@ -32862,6 +33462,7 @@ class Renderer extends EventEmitter {
         }
         :host .canvases {
           min-height: ${this.getHeight(this.options.height, this.options.splitChannels)}px;
+          pointer-events: none;
         }
         :host .canvases > div {
           position: relative;
@@ -32938,150 +33539,134 @@ class Renderer extends EventEmitter {
         this.setScroll(scrollStart);
     }
     destroy() {
-        var _a, _b;
+        var _a;
         this.subscriptions.forEach((unsubscribe) => unsubscribe());
         this.container.remove();
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        (_b = this.unsubscribeOnScroll) === null || _b === void 0 ? void 0 : _b.forEach((unsubscribe) => unsubscribe());
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        (_a = this.unsubscribeOnScroll) === null || _a === void 0 ? void 0 : _a.forEach((unsubscribe) => unsubscribe());
         this.unsubscribeOnScroll = [];
+        if (this.dragStream) {
+            this.dragStream.cleanup();
+            this.dragStream = null;
+        }
+        if (this.scrollStream) {
+            this.scrollStream.cleanup();
+            this.scrollStream = null;
+        }
     }
     createDelay(delayMs = 10) {
         let timeout;
-        let reject;
+        let rejectFn;
         const onClear = () => {
-            if (timeout)
+            if (timeout) {
                 clearTimeout(timeout);
-            if (reject)
-                reject();
+                timeout = undefined;
+            }
+            if (rejectFn) {
+                rejectFn();
+                rejectFn = undefined;
+            }
         };
         this.timeouts.push(onClear);
         return () => {
-            return new Promise((resolveFn, rejectFn) => {
+            return new Promise((resolve, reject) => {
+                // Clear any pending delay
                 onClear();
-                reject = rejectFn;
+                // Store reject function for cleanup
+                rejectFn = reject;
+                // Set new timeout
                 timeout = setTimeout(() => {
                     timeout = undefined;
-                    reject = undefined;
-                    resolveFn();
+                    rejectFn = undefined;
+                    resolve();
                 }, delayMs);
             });
         };
     }
-    // Convert array of color values to linear gradient
-    convertColorValues(color) {
-        if (!Array.isArray(color))
-            return color || '';
-        if (color.length < 2)
-            return color[0] || '';
-        const canvasElement = document.createElement('canvas');
-        const ctx = canvasElement.getContext('2d');
-        const gradientHeight = canvasElement.height * (window.devicePixelRatio || 1);
-        const gradient = ctx.createLinearGradient(0, 0, 0, gradientHeight);
-        const colorStopPercentage = 1 / (color.length - 1);
-        color.forEach((color, index) => {
-            const offset = index * colorStopPercentage;
-            gradient.addColorStop(offset, color);
+    getHeight(optionsHeight, optionsSplitChannel) {
+        var _a;
+        const numberOfChannels = ((_a = this.audioData) === null || _a === void 0 ? void 0 : _a.numberOfChannels) || 1;
+        return resolveChannelHeight({
+            optionsHeight,
+            optionsSplitChannels: optionsSplitChannel,
+            parentHeight: this.parent.clientHeight,
+            numberOfChannels,
+            defaultHeight: DEFAULT_HEIGHT,
         });
-        return gradient;
+    }
+    convertColorValues(color, ctx) {
+        return resolveColorValue(color, this.getPixelRatio(), ctx === null || ctx === void 0 ? void 0 : ctx.canvas.height);
     }
     getPixelRatio() {
-        return Math.max(1, window.devicePixelRatio || 1);
+        return getPixelRatio(window.devicePixelRatio);
     }
     renderBarWaveform(channelData, options, ctx, vScale) {
-        const topChannel = channelData[0];
-        const bottomChannel = channelData[1] || channelData[0];
-        const length = topChannel.length;
         const { width, height } = ctx.canvas;
-        const halfHeight = height / 2;
-        const pixelRatio = this.getPixelRatio();
-        const barWidth = options.barWidth ? options.barWidth * pixelRatio : 1;
-        const barGap = options.barGap ? options.barGap * pixelRatio : options.barWidth ? barWidth / 2 : 0;
-        const barRadius = options.barRadius || 0;
-        const barIndexScale = width / (barWidth + barGap) / length;
-        const rectFn = barRadius && 'roundRect' in ctx ? 'roundRect' : 'rect';
+        const { halfHeight, barWidth, barRadius, barIndexScale, barSpacing, barMinHeight } = calculateBarRenderConfig({
+            width,
+            height,
+            length: (channelData[0] || []).length,
+            options,
+            pixelRatio: this.getPixelRatio(),
+        });
+        const segments = calculateBarSegments({
+            channelData,
+            barIndexScale,
+            barSpacing,
+            barWidth,
+            halfHeight,
+            vScale,
+            canvasHeight: height,
+            barAlign: options.barAlign,
+            barMinHeight,
+        });
         ctx.beginPath();
-        let prevX = 0;
-        let maxTop = 0;
-        let maxBottom = 0;
-        for (let i = 0; i <= length; i++) {
-            const x = Math.round(i * barIndexScale);
-            if (x > prevX) {
-                const topBarHeight = Math.round(maxTop * halfHeight * vScale);
-                const bottomBarHeight = Math.round(maxBottom * halfHeight * vScale);
-                const barHeight = topBarHeight + bottomBarHeight || 1;
-                // Vertical alignment
-                let y = halfHeight - topBarHeight;
-                if (options.barAlign === 'top') {
-                    y = 0;
-                }
-                else if (options.barAlign === 'bottom') {
-                    y = height - barHeight;
-                }
-                ctx[rectFn](prevX * (barWidth + barGap), y, barWidth, barHeight, barRadius);
-                prevX = x;
-                maxTop = 0;
-                maxBottom = 0;
+        for (const segment of segments) {
+            if (barRadius && 'roundRect' in ctx) {
+                ctx.roundRect(segment.x, segment.y, segment.width, segment.height, barRadius);
+            }
+            else {
+                ctx.rect(segment.x, segment.y, segment.width, segment.height);
             }
-            const magnitudeTop = Math.abs(topChannel[i] || 0);
-            const magnitudeBottom = Math.abs(bottomChannel[i] || 0);
-            if (magnitudeTop > maxTop)
-                maxTop = magnitudeTop;
-            if (magnitudeBottom > maxBottom)
-                maxBottom = magnitudeBottom;
         }
         ctx.fill();
         ctx.closePath();
     }
     renderLineWaveform(channelData, _options, ctx, vScale) {
-        const drawChannel = (index) => {
-            const channel = channelData[index] || channelData[0];
-            const length = channel.length;
-            const { height } = ctx.canvas;
-            const halfHeight = height / 2;
-            const hScale = ctx.canvas.width / length;
-            ctx.moveTo(0, halfHeight);
-            let prevX = 0;
-            let max = 0;
-            for (let i = 0; i <= length; i++) {
-                const x = Math.round(i * hScale);
-                if (x > prevX) {
-                    const h = Math.round(max * halfHeight * vScale) || 1;
-                    const y = halfHeight + h * (index === 0 ? -1 : 1);
-                    ctx.lineTo(prevX, y);
-                    prevX = x;
-                    max = 0;
-                }
-                const value = Math.abs(channel[i] || 0);
-                if (value > max)
-                    max = value;
-            }
-            ctx.lineTo(prevX, halfHeight);
-        };
+        const { width, height } = ctx.canvas;
+        const paths = calculateLinePaths({ channelData, width, height, vScale });
         ctx.beginPath();
-        drawChannel(0);
-        drawChannel(1);
+        for (const path of paths) {
+            if (!path.length)
+                continue;
+            ctx.moveTo(path[0].x, path[0].y);
+            for (let i = 1; i < path.length; i++) {
+                const point = path[i];
+                ctx.lineTo(point.x, point.y);
+            }
+        }
         ctx.fill();
         ctx.closePath();
     }
     renderWaveform(channelData, options, ctx) {
-        ctx.fillStyle = this.convertColorValues(options.waveColor);
-        // Custom rendering function
+        ctx.fillStyle = this.convertColorValues(options.waveColor, ctx);
         if (options.renderFunction) {
             options.renderFunction(channelData, ctx);
             return;
         }
-        // Vertical scaling
-        let vScale = options.barHeight || 1;
-        if (options.normalize) {
-            const max = Array.from(channelData[0]).reduce((max, value) => Math.max(max, Math.abs(value)), 0);
-            vScale = max ? 1 / max : 1;
-        }
-        // Render waveform as bars
-        if (options.barWidth || options.barGap || options.barAlign) {
+        const vScale = calculateVerticalScale({
+            channelData,
+            barHeight: options.barHeight,
+            normalize: options.normalize,
+            maxPeak: options.maxPeak,
+        });
+        if (shouldRenderBars(options)) {
             this.renderBarWaveform(channelData, options, ctx, vScale);
             return;
         }
-        // Render waveform as a polyline
         this.renderLineWaveform(channelData, options, ctx, vScale);
     }
     renderSingleCanvas(data, options, width, height, offset, canvasContainer, progressContainer) {
@@ -33094,7 +33679,13 @@ class Renderer extends EventEmitter {
         canvas.style.left = `${Math.round(offset)}px`;
         canvasContainer.appendChild(canvas);
         const ctx = canvas.getContext('2d');
-        this.renderWaveform(data, options, ctx);
+        if (options.renderFunction) {
+            ctx.fillStyle = this.convertColorValues(options.waveColor, ctx);
+            options.renderFunction(data, ctx);
+        }
+        else {
+            this.renderWaveform(data, options, ctx);
+        }
         // Draw a progress canvas
         if (canvas.width > 0 && canvas.height > 0) {
             const progressCanvas = canvas.cloneNode();
@@ -33102,7 +33693,7 @@ class Renderer extends EventEmitter {
             progressCtx.drawImage(canvas, 0, 0);
             // Set the composition method to draw only where the waveform is drawn
             progressCtx.globalCompositeOperation = 'source-in';
-            progressCtx.fillStyle = this.convertColorValues(options.progressColor);
+            progressCtx.fillStyle = this.convertColorValues(options.progressColor, progressCtx);
             // This rectangle acts as a mask thanks to the composition method
             progressCtx.fillRect(0, 0, canvas.width, canvas.height);
             progressContainer.appendChild(progressCanvas);
@@ -33112,17 +33703,8 @@ class Renderer extends EventEmitter {
         const pixelRatio = this.getPixelRatio();
         const { clientWidth } = this.scrollContainer;
         const totalWidth = width / pixelRatio;
-        let singleCanvasWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth, totalWidth);
+        const singleCanvasWidth = calculateSingleCanvasWidth({ clientWidth, totalWidth, options });
         let drawnIndexes = {};
-        // Adjust width to avoid gaps between canvases when using bars
-        if (options.barWidth || options.barGap) {
-            const barWidth = options.barWidth || 0.5;
-            const barGap = options.barGap || barWidth / 2;
-            const totalBarWidth = barWidth + barGap;
-            if (singleCanvasWidth % totalBarWidth !== 0) {
-                singleCanvasWidth = Math.floor(singleCanvasWidth / totalBarWidth) * totalBarWidth;
-            }
-        }
         // Nothing to render
         if (singleCanvasWidth === 0)
             return;
@@ -33136,24 +33718,15 @@ class Renderer extends EventEmitter {
             const offset = index * singleCanvasWidth;
             let clampedWidth = Math.min(totalWidth - offset, singleCanvasWidth);
             // Clamp the width to the bar grid to avoid empty canvases at the end
-            if (options.barWidth || options.barGap) {
-                const barWidth = options.barWidth || 0.5;
-                const barGap = options.barGap || barWidth / 2;
-                const totalBarWidth = barWidth + barGap;
-                clampedWidth = Math.floor(clampedWidth / totalBarWidth) * totalBarWidth;
-            }
+            clampedWidth = clampWidthToBarGrid(clampedWidth, options);
             if (clampedWidth <= 0)
                 return;
-            const data = channelData.map((channel) => {
-                const start = Math.floor((offset / totalWidth) * channel.length);
-                const end = Math.floor(((offset + clampedWidth) / totalWidth) * channel.length);
-                return channel.slice(start, end);
-            });
+            const data = sliceChannelData({ channelData, offset, clampedWidth, totalWidth });
             this.renderSingleCanvas(data, options, clampedWidth, height, offset, canvasContainer, progressContainer);
         };
         // Clear canvases to avoid too many DOM nodes
         const clearCanvases = () => {
-            if (Object.keys(drawnIndexes).length > Renderer.MAX_NODES) {
+            if (shouldClearCanvases(Object.keys(drawnIndexes).length)) {
                 canvasContainer.innerHTML = '';
                 progressContainer.innerHTML = '';
                 drawnIndexes = {};
@@ -33169,21 +33742,18 @@ class Renderer extends EventEmitter {
             return;
         }
         // Lazy rendering
-        const viewPosition = this.scrollContainer.scrollLeft / totalWidth;
-        const startCanvas = Math.floor(viewPosition * numCanvases);
-        // Draw the canvases in the viewport first
-        draw(startCanvas - 1);
-        draw(startCanvas);
-        draw(startCanvas + 1);
+        const initialRange = getLazyRenderRange({
+            scrollLeft: this.scrollContainer.scrollLeft,
+            totalWidth,
+            numCanvases,
+        });
+        initialRange.forEach((index) => draw(index));
         // Subscribe to the scroll event to draw additional canvases
         if (numCanvases > 1) {
             const unsubscribe = this.on('scroll', () => {
                 const { scrollLeft } = this.scrollContainer;
-                const canvasIndex = Math.floor((scrollLeft / totalWidth) * numCanvases);
                 clearCanvases();
-                draw(canvasIndex - 1);
-                draw(canvasIndex);
-                draw(canvasIndex + 1);
+                getLazyRenderRange({ scrollLeft, totalWidth, numCanvases }).forEach((index) => draw(index));
             });
             this.unsubscribeOnScroll.push(unsubscribe);
         }
@@ -33222,12 +33792,15 @@ class Renderer extends EventEmitter {
             // Determine the width of the waveform
             const pixelRatio = this.getPixelRatio();
             const parentWidth = this.scrollContainer.clientWidth;
-            const scrollWidth = Math.ceil(audioData.duration * (this.options.minPxPerSec || 0));
+            const { scrollWidth, isScrollable, useParentWidth, width } = calculateWaveformLayout({
+                duration: audioData.duration,
+                minPxPerSec: this.options.minPxPerSec || 0,
+                parentWidth,
+                fillParent: this.options.fillParent,
+                pixelRatio,
+            });
             // Whether the container should scroll
-            this.isScrollable = scrollWidth > parentWidth;
-            const useParentWidth = this.options.fillParent && !this.isScrollable;
-            // Width of the waveform in pixels
-            const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;
+            this.isScrollable = isScrollable;
             // Set the width of the wrapper
             this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`;
             // Set additional styles
@@ -33270,12 +33843,7 @@ class Renderer extends EventEmitter {
         // Adjust the scroll position so that the cursor stays in the same place
         if (this.isScrollable && scrollWidth !== this.scrollContainer.scrollWidth) {
             const { right: after } = this.progressWrapper.getBoundingClientRect();
-            let delta = after - before;
-            // to limit compounding floating-point drift
-            // we need to round to the half px furthest from 0
-            delta *= 2;
-            delta = delta < 0 ? Math.floor(delta) : Math.ceil(delta);
-            delta /= 2;
+            const delta = roundToHalfAwayFromZero(after - before);
             this.scrollContainer.scrollLeft += delta;
         }
     }
@@ -33306,16 +33874,9 @@ class Renderer extends EventEmitter {
             // Keep the cursor centered when playing
             const center = progressWidth - scrollLeft - middle;
             if (isPlaying && this.options.autoCenter && center > 0) {
-                this.scrollContainer.scrollLeft += Math.min(center, 10);
+                this.scrollContainer.scrollLeft += center;
             }
         }
-        // Emit the scroll event
-        {
-            const newScroll = this.scrollContainer.scrollLeft;
-            const startX = newScroll / scrollWidth;
-            const endX = (newScroll + clientWidth) / scrollWidth;
-            this.emit('scroll', startX, endX, newScroll, newScroll + clientWidth);
-        }
     }
     renderProgress(progress, isPlaying) {
         if (isNaN(progress))
@@ -33327,7 +33888,8 @@ class Renderer extends EventEmitter {
         this.cursor.style.transform = this.options.cursorWidth
             ? `translateX(-${progress * this.options.cursorWidth}px)`
             : '';
-        if (this.isScrollable && this.options.autoScroll) {
+        // Only scroll if we have valid audio data to prevent race conditions during loading
+        if (this.isScrollable && this.options.autoScroll && this.audioData && this.audioData.duration > 0) {
             this.scrollIntoView(progress, isPlaying);
         }
     }
@@ -33358,27 +33920,39 @@ class Renderer extends EventEmitter {
         });
     }
 }
-Renderer.MAX_CANVAS_WIDTH = 8000;
-Renderer.MAX_NODES = 10;
 
 class Timer extends EventEmitter {
     constructor() {
         super(...arguments);
-        this.unsubscribe = () => undefined;
+        this.animationFrameId = null;
+        this.isRunning = false;
     }
     start() {
-        this.unsubscribe = this.on('tick', () => {
-            requestAnimationFrame(() => {
-                this.emit('tick');
-            });
-        });
-        this.emit('tick');
+        // Prevent multiple simultaneous loops
+        if (this.isRunning)
+            return;
+        this.isRunning = true;
+        const tick = () => {
+            // Only continue if timer is still running
+            if (!this.isRunning)
+                return;
+            this.emit('tick');
+            // Schedule next frame
+            this.animationFrameId = requestAnimationFrame(tick);
+        };
+        // Start the loop
+        tick();
     }
     stop() {
-        this.unsubscribe();
+        this.isRunning = false;
+        // Cancel any pending animation frame
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
     }
     destroy() {
-        this.unsubscribe();
+        this.stop();
     }
 }
 
@@ -33393,6 +33967,10 @@ var __awaiter$4 = (undefined && undefined.__awaiter) || function (thisArg, _argu
 };
 /**
  * A Web Audio buffer player emulating the behavior of an HTML5 Audio element.
+ *
+ * Note: This class does not manage blob: URLs. If you pass a blob: URL to setSrc(),
+ * you are responsible for revoking it when done. The Player class (player.ts) handles
+ * blob URL lifecycle management automatically.
  */
 class WebAudioPlayer extends EventEmitter {
     constructor(audioContext = new AudioContext()) {
@@ -33453,14 +34031,21 @@ class WebAudioPlayer extends EventEmitter {
             this.emit('canplay');
             if (this.autoplay)
                 this.play();
+        })
+            .catch((err) => {
+            // Emit error for proper error handling
+            console.error('WebAudioPlayer load error:', err);
         });
     }
     _play() {
-        var _a;
         if (!this.paused)
             return;
         this.paused = false;
-        (_a = this.bufferNode) === null || _a === void 0 ? void 0 : _a.disconnect();
+        // Clean up old buffer node completely before creating new one
+        if (this.bufferNode) {
+            this.bufferNode.onended = null;
+            this.bufferNode.disconnect();
+        }
         this.bufferNode = this.audioContext.createBufferSource();
         if (this.buffer) {
             this.bufferNode.buffer = this.buffer;
@@ -33616,6 +34201,239 @@ class WebAudioPlayer extends EventEmitter {
     }
 }
 
+/**
+ * Centralized reactive state for WaveSurfer
+ *
+ * This module provides a single source of truth for all WaveSurfer state.
+ * State is managed using reactive signals that automatically notify subscribers.
+ */
+/**
+ * Create a new WaveSurfer state instance
+ *
+ * @param playerSignals - Optional signals from Player to compose with WaveSurfer state
+ *
+ * @example
+ * ```typescript
+ * // Without Player signals (standalone)
+ * const { state, actions } = createWaveSurferState()
+ *
+ * // With Player signals (composed)
+ * const { state, actions } = createWaveSurferState({
+ *   isPlaying: player.isPlayingSignal,
+ *   currentTime: player.currentTimeSignal,
+ *   // ...
+ * })
+ *
+ * // Read state
+ * console.log(state.isPlaying.value)
+ *
+ * // Update state
+ * actions.setPlaying(true)
+ *
+ * // Subscribe to changes
+ * state.isPlaying.subscribe(playing => {
+ *   console.log('Playing:', playing)
+ * })
+ * ```
+ */
+function createWaveSurferState(playerSignals) {
+    var _a, _b, _c, _d, _e, _f;
+    // Use Player signals if provided, otherwise create new ones
+    const currentTime = (_a = playerSignals === null || playerSignals === void 0 ? void 0 : playerSignals.currentTime) !== null && _a !== void 0 ? _a : signal(0);
+    const duration = (_b = playerSignals === null || playerSignals === void 0 ? void 0 : playerSignals.duration) !== null && _b !== void 0 ? _b : signal(0);
+    const isPlaying = (_c = playerSignals === null || playerSignals === void 0 ? void 0 : playerSignals.isPlaying) !== null && _c !== void 0 ? _c : signal(false);
+    const isSeeking = (_d = playerSignals === null || playerSignals === void 0 ? void 0 : playerSignals.isSeeking) !== null && _d !== void 0 ? _d : signal(false);
+    const volume = (_e = playerSignals === null || playerSignals === void 0 ? void 0 : playerSignals.volume) !== null && _e !== void 0 ? _e : signal(1);
+    const playbackRate = (_f = playerSignals === null || playerSignals === void 0 ? void 0 : playerSignals.playbackRate) !== null && _f !== void 0 ? _f : signal(1);
+    // WaveSurfer-specific signals (not in Player)
+    const audioBuffer = signal(null);
+    const peaks = signal(null);
+    const url = signal('');
+    const zoom = signal(0);
+    const scrollPosition = signal(0);
+    // Computed values (derived state)
+    const isPaused = computed(() => !isPlaying.value, [isPlaying]);
+    const canPlay = computed(() => audioBuffer.value !== null, [audioBuffer]);
+    const isReady = computed(() => {
+        return canPlay.value && duration.value > 0;
+    }, [canPlay, duration]);
+    const progress = computed(() => currentTime.value, [currentTime]);
+    const progressPercent = computed(() => {
+        return duration.value > 0 ? currentTime.value / duration.value : 0;
+    }, [currentTime, duration]);
+    // Public read-only state
+    const state = {
+        currentTime,
+        duration,
+        isPlaying,
+        isPaused,
+        isSeeking,
+        volume,
+        playbackRate,
+        audioBuffer,
+        peaks,
+        url,
+        zoom,
+        scrollPosition,
+        canPlay,
+        isReady,
+        progress,
+        progressPercent,
+    };
+    // Actions that modify state
+    const actions = {
+        setCurrentTime: (time) => {
+            const clampedTime = Math.max(0, Math.min(duration.value || Infinity, time));
+            currentTime.set(clampedTime);
+        },
+        setDuration: (d) => {
+            duration.set(Math.max(0, d));
+        },
+        setPlaying: (playing) => {
+            isPlaying.set(playing);
+        },
+        setSeeking: (seeking) => {
+            isSeeking.set(seeking);
+        },
+        setVolume: (v) => {
+            const clampedVolume = Math.max(0, Math.min(1, v));
+            volume.set(clampedVolume);
+        },
+        setPlaybackRate: (rate) => {
+            const clampedRate = Math.max(0.1, Math.min(16, rate));
+            playbackRate.set(clampedRate);
+        },
+        setAudioBuffer: (buffer) => {
+            audioBuffer.set(buffer);
+            if (buffer) {
+                duration.set(buffer.duration);
+            }
+        },
+        setPeaks: (p) => {
+            peaks.set(p);
+        },
+        setUrl: (u) => {
+            url.set(u);
+        },
+        setZoom: (z) => {
+            zoom.set(Math.max(0, z));
+        },
+        setScrollPosition: (pos) => {
+            scrollPosition.set(Math.max(0, pos));
+        },
+    };
+    return { state, actions };
+}
+
+/**
+ * State-driven event emission utilities
+ *
+ * Automatically emit events when reactive state changes.
+ * Ensures events are always in sync with state and removes manual emit() calls.
+ */
+/**
+ * Setup automatic event emission from state changes
+ *
+ * This function subscribes to all relevant state signals and automatically
+ * emits corresponding events when state changes. This ensures:
+ * - Events are always in sync with state
+ * - No manual emit() calls needed
+ * - Can't forget to emit an event
+ * - Clear event sources (state changes)
+ *
+ * @example
+ * ```typescript
+ * const { state } = createWaveSurferState()
+ * const wavesurfer = new WaveSurfer()
+ *
+ * const cleanup = setupStateEventEmission(state, wavesurfer)
+ *
+ * // Now state changes automatically emit events
+ * state.isPlaying.set(true) // → wavesurfer.emit('play')
+ * ```
+ *
+ * @param state - Reactive state to observe
+ * @param emitter - Event emitter to emit events on
+ * @returns Cleanup function that removes all subscriptions
+ */
+function setupStateEventEmission(state, emitter) {
+    const cleanups = [];
+    // ============================================================================
+    // Play/Pause Events
+    // ============================================================================
+    // Emit play/pause events when playing state changes
+    cleanups.push(effect(() => {
+        const isPlaying = state.isPlaying.value;
+        emitter.emit(isPlaying ? 'play' : 'pause');
+    }, [state.isPlaying]));
+    // ============================================================================
+    // Time Update Events
+    // ============================================================================
+    // Emit timeupdate when current time changes
+    cleanups.push(effect(() => {
+        const currentTime = state.currentTime.value;
+        emitter.emit('timeupdate', currentTime);
+        // Also emit audioprocess when playing
+        if (state.isPlaying.value) {
+            emitter.emit('audioprocess', currentTime);
+        }
+    }, [state.currentTime, state.isPlaying]));
+    // ============================================================================
+    // Seeking Events
+    // ============================================================================
+    // Emit seeking event when seeking state changes to true
+    cleanups.push(effect(() => {
+        const isSeeking = state.isSeeking.value;
+        if (isSeeking) {
+            emitter.emit('seeking', state.currentTime.value);
+        }
+    }, [state.isSeeking, state.currentTime]));
+    // ============================================================================
+    // Ready Event
+    // ============================================================================
+    // Emit ready when state becomes ready
+    let wasReady = false;
+    cleanups.push(effect(() => {
+        const isReady = state.isReady.value;
+        if (isReady && !wasReady) {
+            wasReady = true;
+            emitter.emit('ready', state.duration.value);
+        }
+    }, [state.isReady, state.duration]));
+    // ============================================================================
+    // Finish Event
+    // ============================================================================
+    // Emit finish when playback ends (reached duration and stopped)
+    let wasPlayingAtEnd = false;
+    cleanups.push(effect(() => {
+        const isPlaying = state.isPlaying.value;
+        const currentTime = state.currentTime.value;
+        const duration = state.duration.value;
+        // Check if we're at the end
+        const isAtEnd = duration > 0 && currentTime >= duration;
+        // Emit finish when we were playing at end and now stopped
+        if (wasPlayingAtEnd && !isPlaying && isAtEnd) {
+            emitter.emit('finish');
+        }
+        // Track if we're playing at the end
+        wasPlayingAtEnd = isPlaying && isAtEnd;
+    }, [state.isPlaying, state.currentTime, state.duration]));
+    // ============================================================================
+    // Zoom Events
+    // ============================================================================
+    // Emit zoom when zoom level changes
+    cleanups.push(effect(() => {
+        const zoom = state.zoom.value;
+        if (zoom > 0) {
+            emitter.emit('zoom', zoom);
+        }
+    }, [state.zoom]));
+    // Return cleanup function
+    return () => {
+        cleanups.forEach((cleanup) => cleanup());
+    };
+}
+
 var __awaiter$5 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -33642,6 +34460,14 @@ class WaveSurfer extends Player {
     static create(options) {
         return new WaveSurfer(options);
     }
+    /** Get the reactive state for advanced use cases */
+    getState() {
+        return this.wavesurferState;
+    }
+    /** Get the renderer instance for plugin access to reactive streams */
+    getRenderer() {
+        return this.renderer;
+    }
     /** Create a new WaveSurfer instance */
     constructor(options) {
         const media = options.media ||
@@ -33658,13 +34484,27 @@ class WaveSurfer extends Player {
         this.subscriptions = [];
         this.mediaSubscriptions = [];
         this.abortController = null;
+        this.reactiveCleanups = [];
         this.options = Object.assign({}, defaultOptions, options);
+        // Initialize reactive state
+        // Pass Player signals to compose them into WaveSurferState
+        const { state, actions } = createWaveSurferState({
+            isPlaying: this.isPlayingSignal,
+            currentTime: this.currentTimeSignal,
+            duration: this.durationSignal,
+            volume: this.volumeSignal,
+            playbackRate: this.playbackRateSignal,
+            isSeeking: this.seekingSignal,
+        });
+        this.wavesurferState = state;
+        this.wavesurferActions = actions;
         this.timer = new Timer();
         const audioElement = media ? undefined : this.getMediaElement();
         this.renderer = new Renderer(this.options, audioElement);
         this.initPlayerEvents();
         this.initRendererEvents();
         this.initTimerEvents();
+        this.initReactiveState();
         this.initPlugins();
         // Read the initial URL before load has been called
         const initialUrl = this.options.url || this.getSrc() || '';
@@ -33677,7 +34517,10 @@ class WaveSurfer extends Player {
             if (initialUrl || (peaks && duration)) {
                 // Swallow async errors because they cannot be caught from a constructor call.
                 // Subscribe to the wavesurfer's error event to handle them.
-                this.load(initialUrl, peaks, duration).catch(() => null);
+                this.load(initialUrl, peaks, duration).catch((err) => {
+                    // Emit error event for proper error handling
+                    this.emit('error', err instanceof Error ? err : new Error(String(err)));
+                });
             }
         });
     }
@@ -33699,6 +34542,12 @@ class WaveSurfer extends Player {
             }
         }));
     }
+    initReactiveState() {
+        // Bridge reactive state to EventEmitter for backwards compatibility
+        this.reactiveCleanups.push(setupStateEventEmission(this.wavesurferState, {
+            emit: this.emit.bind(this),
+        }));
+    }
     initPlayerEvents() {
         if (this.isPlaying()) {
             this.emit('play');
@@ -33763,33 +34612,44 @@ class WaveSurfer extends Player {
         // DragEnd
         this.renderer.on('dragend', (relativeX) => {
             this.emit('dragend', relativeX);
+        }), 
+        // Resize
+        this.renderer.on('resize', () => {
+            this.emit('resize');
         }));
         // Drag
         {
             let debounce;
-            this.subscriptions.push(this.renderer.on('drag', (relativeX) => {
+            const unsubscribeDrag = this.renderer.on('drag', (relativeX) => {
+                var _a;
                 if (!this.options.interact)
                     return;
                 // Update the visual position
                 this.renderer.renderProgress(relativeX);
                 // Set the audio position with a debounce
                 clearTimeout(debounce);
-                let debounceTime;
+                let debounceTime = 0;
+                const dragToSeek = this.options.dragToSeek;
                 if (this.isPlaying()) {
                     debounceTime = 0;
                 }
-                else if (this.options.dragToSeek === true) {
+                else if (dragToSeek === true) {
                     debounceTime = 200;
                 }
-                else if (typeof this.options.dragToSeek === 'object' && this.options.dragToSeek !== undefined) {
-                    debounceTime = this.options.dragToSeek['debounceTime'];
+                else if (dragToSeek && typeof dragToSeek === 'object') {
+                    debounceTime = (_a = dragToSeek.debounceTime) !== null && _a !== void 0 ? _a : 200;
                 }
                 debounce = setTimeout(() => {
                     this.seekTo(relativeX);
                 }, debounceTime);
                 this.emit('interaction', relativeX * this.getDuration());
                 this.emit('drag', relativeX);
-            }));
+            });
+            // Clear debounce timeout on destroy
+            this.subscriptions.push(() => {
+                clearTimeout(debounce);
+                unsubscribeDrag();
+            });
         }
     }
     initPlugins() {
@@ -33876,12 +34736,15 @@ class WaveSurfer extends Player {
                 this.pause();
             this.decodedData = null;
             this.stopAtPosition = null;
+            // Abort any ongoing fetch before starting a new one
+            (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+            this.abortController = null;
             // Fetch the entire audio as a blob if pre-decoded data is not provided
             if (!blob && !channelData) {
                 const fetchParams = this.options.fetchParams || {};
                 if (window.AbortController && !fetchParams.signal) {
                     this.abortController = new AbortController();
-                    fetchParams.signal = (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.signal;
+                    fetchParams.signal = this.abortController.signal;
                 }
                 const onProgress = (percentage) => this.emit('loading', percentage);
                 blob = yield Fetcher.fetchBlob(url, onProgress, fetchParams);
@@ -33971,8 +34834,8 @@ class WaveSurfer extends Player {
             const channel = this.decodedData.getChannelData(i);
             const data = [];
             const sampleSize = channel.length / maxLength;
-            for (let i = 0; i < maxLength; i++) {
-                const sample = channel.slice(Math.floor(i * sampleSize), Math.ceil((i + 1) * sampleSize));
+            for (let j = 0; j < maxLength; j++) {
+                const sample = channel.slice(Math.floor(j * sampleSize), Math.ceil((j + 1) * sampleSize));
                 let max = 0;
                 for (let x = 0; x < sample.length; x++) {
                     const n = sample[x];
@@ -34005,7 +34868,7 @@ class WaveSurfer extends Player {
         this.updateProgress(time);
         this.emit('timeupdate', time);
     }
-    /** Seek to a percentage of audio as [0..1] (0 = beginning, 1 = end) */
+    /** Seek to a ratio of audio as [0..1] (0 = beginning, 1 = end) */
     seekTo(progress) {
         const time = this.getDuration() * progress;
         this.setTime(time);
@@ -34069,6 +34932,8 @@ class WaveSurfer extends Player {
         this.plugins.forEach((plugin) => plugin.destroy());
         this.subscriptions.forEach((unsubscribe) => unsubscribe());
         this.unsubscribePlayerEvents();
+        this.reactiveCleanups.forEach((cleanup) => cleanup());
+        this.reactiveCleanups = [];
         this.timer.destroy();
         this.renderer.destroy();
         super.destroy();
@@ -35251,7 +36116,6 @@ var Attachment = function Attachment(_ref) {
   })), sizeProgress && !isRepliedMessage && (/*#__PURE__*/React__default.createElement(SizeProgress, {
     color: textOnPrimary
   }, bytesToSize(sizeProgress.loaded, 1), " / ", bytesToSize(sizeProgress.total, 1)))))))) : null, /*#__PURE__*/React__default.createElement(VideoPreview, {
-    theme: theme,
     width: isRepliedMessage ? '40px' : isDetailsView ? '100%' : (renderWidth || videoAttachmentMaxWidth || 420) + "px",
     height: isRepliedMessage ? '40px' : isDetailsView ? '100%' : (renderHeight || videoAttachmentMaxHeight || 240) + "px",
     file: attachment,
@@ -35287,7 +36151,11 @@ var Attachment = function Attachment(_ref) {
     channelId: channelId,
     incoming: incoming,
     viewOnce: viewOnce,
-    setViewOnceVoiceModalOpen: setViewOnceVoiceModalOpen
+    setViewOnceVoiceModalOpen: viewOnce ? function () {
+      if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
+        setViewOnceVoiceModalOpen(true);
+      }
+    } : undefined
   })) : attachment.type === attachmentTypes.link ? null : (
   /*#__PURE__*/
   React__default.createElement(AttachmentFile$1, {
@@ -35572,7 +36440,7 @@ var RepliedMessage = function RepliedMessage(_ref) {
   }) : parentNotLinkAttachment && (message.parentMessage.attachments[0].type === attachmentTypes.image ? 'Photo' : message.parentMessage.attachments[0].type === attachmentTypes.video ? 'Video' : message.parentMessage.attachments[0].type === attachmentTypes.voice ? ' Voice' : 'File'))));
 };
 var RepliedMessage$1 = /*#__PURE__*/React__default.memo(RepliedMessage, function (prevProps, nextProps) {
-  return prevProps.theme === nextProps.theme && prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.selectionIsActive === nextProps.selectionIsActive && prevProps.contactsMap === nextProps.contactsMap;
+  return prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.selectionIsActive === nextProps.selectionIsActive && prevProps.contactsMap === nextProps.contactsMap;
 });
 var ReplyMessageContainer = styled.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  border-left: 2px solid ", ";\n  padding: 4px 6px;\n  position: relative;\n  //margin: ", ";\n  margin: ", ";\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  margin-top: ", ";\n  cursor: pointer;\n"])), function (props) {
   return props.leftBorderColor || '#b8b9c2';
@@ -37696,7 +38564,6 @@ var MessageBody = function MessageBody(_ref) {
     fixEmojiCategoriesTitleOnTop = _ref.fixEmojiCategoriesTitleOnTop,
     selectedMessagesMap = _ref.selectedMessagesMap,
     contactsMap = _ref.contactsMap,
-    theme = _ref.theme,
     messageTextFontSize = _ref.messageTextFontSize,
     messageTextLineHeight = _ref.messageTextLineHeight,
     handleToggleForwardMessagePopup = _ref.handleToggleForwardMessagePopup,
@@ -38061,7 +38928,6 @@ var MessageBody = function MessageBody(_ref) {
     infoIconOrder: infoIconOrder
   }))), message.parentMessage && message.parentMessage.id && !isThreadMessage && (/*#__PURE__*/React__default.createElement(RepliedMessage$1, {
     message: message,
-    theme: theme,
     isPendingMessage: isPendingMessage,
     handleScrollToRepliedMessage: handleScrollToRepliedMessage,
     ownMessageOnRightSide: ownMessageOnRightSide,
@@ -38091,7 +38957,6 @@ var MessageBody = function MessageBody(_ref) {
     leftPadding: message.incoming ? (incomingMessageStyles === null || incomingMessageStyles === void 0 ? void 0 : incomingMessageStyles.background) !== 'inherit' : (outgoingMessageStyles === null || outgoingMessageStyles === void 0 ? void 0 : outgoingMessageStyles.background) !== 'inherit',
     color: accentColor
   }, /*#__PURE__*/React__default.createElement(SvgForward, null), "Forwarded message")), /*#__PURE__*/React__default.createElement(MessageText, {
-    theme: theme,
     draggable: false,
     color: textPrimary,
     fontSize: messageTextFontSize,
@@ -38269,7 +39134,7 @@ var MessageBody = function MessageBody(_ref) {
 };
 var MessageBody$1 = /*#__PURE__*/React__default.memo(MessageBody, function (prevProps, nextProps) {
   var _prevProps$ogMetadata, _nextProps$ogMetadata, _prevProps$ogMetadata2, _nextProps$ogMetadata2, _prevProps$ogMetadata3, _nextProps$ogMetadata3, _prevProps$ogMetadata4, _nextProps$ogMetadata4, _prevProps$ogMetadata5, _nextProps$ogMetadata5, _prevProps$ogMetadata6, _nextProps$ogMetadata6;
-  return !!(prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.showSenderNameOnDirectChannel === nextProps.showSenderNameOnDirectChannel && prevProps.showSenderNameOnGroupChannel === nextProps.showSenderNameOnGroupChannel && prevProps.showSenderNameOnOwnMessages === nextProps.showSenderNameOnOwnMessages && prevProps.messageStatusAndTimePosition === nextProps.messageStatusAndTimePosition && prevProps.messageStatusDisplayingType === nextProps.messageStatusDisplayingType && prevProps.outgoingMessageStyles === nextProps.outgoingMessageStyles && prevProps.incomingMessageStyles === nextProps.incomingMessageStyles && prevProps.ownRepliedMessageBackground === nextProps.ownRepliedMessageBackground && prevProps.incomingRepliedMessageBackground === nextProps.incomingRepliedMessageBackground && prevProps.showMessageStatus === nextProps.showMessageStatus && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.showMessageTime === nextProps.showMessageTime && prevProps.showMessageStatusForEachMessage === nextProps.showMessageStatusForEachMessage && prevProps.showMessageTimeForEachMessage === nextProps.showMessageTimeForEachMessage && prevProps.messageReaction === nextProps.messageReaction && prevProps.editMessage === nextProps.editMessage && prevProps.copyMessage === nextProps.copyMessage && prevProps.replyMessage === nextProps.replyMessage && prevProps.replyMessageInThread === nextProps.replyMessageInThread && prevProps.forwardMessage === nextProps.forwardMessage && prevProps.deleteMessage === nextProps.deleteMessage && prevProps.selectMessage === nextProps.selectMessage && prevProps.allowEditDeleteIncomingMessage === nextProps.allowEditDeleteIncomingMessage && prevProps.reportMessage === nextProps.reportMessage && prevProps.reactionIcon === nextProps.reactionIcon && prevProps.editIcon === nextProps.editIcon && prevProps.copyIcon === nextProps.copyIcon && prevProps.replyIcon === nextProps.replyIcon && prevProps.replyInThreadIcon === nextProps.replyInThreadIcon && prevProps.forwardIcon === nextProps.forwardIcon && prevProps.deleteIcon === nextProps.deleteIcon && prevProps.selectIcon === nextProps.selectIcon && prevProps.starIcon === nextProps.starIcon && prevProps.staredIcon === nextProps.staredIcon && prevProps.reportIcon === nextProps.reportIcon && prevProps.fixEmojiCategoriesTitleOnTop === nextProps.fixEmojiCategoriesTitleOnTop && prevProps.emojisCategoryIconsPosition === nextProps.emojisCategoryIconsPosition && prevProps.emojisContainerBorderRadius === nextProps.emojisContainerBorderRadius && prevProps.reactionIconOrder === nextProps.reactionIconOrder && prevProps.editIconOrder === nextProps.editIconOrder && prevProps.copyIconOrder === nextProps.copyIconOrder && prevProps.replyIconOrder === nextProps.replyIconOrder && prevProps.replyInThreadIconOrder === nextProps.replyInThreadIconOrder && prevProps.forwardIconOrder === nextProps.forwardIconOrder && prevProps.deleteIconOrder === nextProps.deleteIconOrder && prevProps.selectIconOrder === nextProps.selectIconOrder && prevProps.starIconOrder === nextProps.starIconOrder && prevProps.reportIconOrder === nextProps.reportIconOrder && prevProps.reactionIconTooltipText === nextProps.reactionIconTooltipText && prevProps.editIconTooltipText === nextProps.editIconTooltipText && prevProps.copyIconTooltipText === nextProps.copyIconTooltipText && prevProps.replyIconTooltipText === nextProps.replyIconTooltipText && prevProps.replyInThreadIconTooltipText === nextProps.replyInThreadIconTooltipText && prevProps.forwardIconTooltipText === nextProps.forwardIconTooltipText && prevProps.deleteIconTooltipText === nextProps.deleteIconTooltipText && prevProps.selectIconTooltipText === nextProps.selectIconTooltipText && prevProps.starIconTooltipText === nextProps.starIconTooltipText && prevProps.reportIconTooltipText === nextProps.reportIconTooltipText && prevProps.messageActionIconsColor === nextProps.messageActionIconsColor && prevProps.inlineReactionIcon === nextProps.inlineReactionIcon && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.fileAttachmentsBoxWidth === nextProps.fileAttachmentsBoxWidth && prevProps.fileAttachmentsBoxBackground === nextProps.fileAttachmentsBoxBackground && prevProps.fileAttachmentsBoxBorder === nextProps.fileAttachmentsBoxBorder && prevProps.fileAttachmentsTitleColor === nextProps.fileAttachmentsTitleColor && prevProps.fileAttachmentsSizeColor === nextProps.fileAttachmentsSizeColor && prevProps.fileAttachmentsIcon === nextProps.fileAttachmentsIcon && prevProps.imageAttachmentMaxWidth === nextProps.imageAttachmentMaxWidth && prevProps.imageAttachmentMaxHeight === nextProps.imageAttachmentMaxHeight && prevProps.videoAttachmentMaxWidth === nextProps.videoAttachmentMaxWidth && prevProps.videoAttachmentMaxHeight === nextProps.videoAttachmentMaxHeight && prevProps.theme === nextProps.theme && prevProps.messageTextFontSize === nextProps.messageTextFontSize && prevProps.messageTextLineHeight === nextProps.messageTextLineHeight && prevProps.messageActionsShow === nextProps.messageActionsShow && prevProps.emojisPopupOpen === nextProps.emojisPopupOpen && prevProps.emojisPopupPosition === nextProps.emojisPopupPosition && prevProps.frequentlyEmojisOpen === nextProps.frequentlyEmojisOpen && (((_prevProps$ogMetadata = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata === void 0 ? void 0 : _prevProps$ogMetadata.ogLayoutOrder) || 'og-first') === (((_nextProps$ogMetadata = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata === void 0 ? void 0 : _nextProps$ogMetadata.ogLayoutOrder) || 'og-first') && ((_prevProps$ogMetadata2 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata2 === void 0 ? void 0 : _prevProps$ogMetadata2.ogShowUrl) === ((_nextProps$ogMetadata2 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata2 === void 0 ? void 0 : _nextProps$ogMetadata2.ogShowUrl) && ((_prevProps$ogMetadata3 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata3 === void 0 ? void 0 : _prevProps$ogMetadata3.ogShowTitle) === ((_nextProps$ogMetadata3 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata3 === void 0 ? void 0 : _nextProps$ogMetadata3.ogShowTitle) && ((_prevProps$ogMetadata4 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata4 === void 0 ? void 0 : _prevProps$ogMetadata4.ogShowDescription) === ((_nextProps$ogMetadata4 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata4 === void 0 ? void 0 : _nextProps$ogMetadata4.ogShowDescription) && ((_prevProps$ogMetadata5 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata5 === void 0 ? void 0 : _prevProps$ogMetadata5.ogShowFavicon) === ((_nextProps$ogMetadata5 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata5 === void 0 ? void 0 : _nextProps$ogMetadata5.ogShowFavicon) && ((_prevProps$ogMetadata6 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata6 === void 0 ? void 0 : _prevProps$ogMetadata6.order) === ((_nextProps$ogMetadata6 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata6 === void 0 ? void 0 : _nextProps$ogMetadata6.order) && prevProps.collapsedCharacterLimit === nextProps.collapsedCharacterLimit);
+  return !!(prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.showSenderNameOnDirectChannel === nextProps.showSenderNameOnDirectChannel && prevProps.showSenderNameOnGroupChannel === nextProps.showSenderNameOnGroupChannel && prevProps.showSenderNameOnOwnMessages === nextProps.showSenderNameOnOwnMessages && prevProps.messageStatusAndTimePosition === nextProps.messageStatusAndTimePosition && prevProps.messageStatusDisplayingType === nextProps.messageStatusDisplayingType && prevProps.outgoingMessageStyles === nextProps.outgoingMessageStyles && prevProps.incomingMessageStyles === nextProps.incomingMessageStyles && prevProps.ownRepliedMessageBackground === nextProps.ownRepliedMessageBackground && prevProps.incomingRepliedMessageBackground === nextProps.incomingRepliedMessageBackground && prevProps.showMessageStatus === nextProps.showMessageStatus && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.showMessageTime === nextProps.showMessageTime && prevProps.showMessageStatusForEachMessage === nextProps.showMessageStatusForEachMessage && prevProps.showMessageTimeForEachMessage === nextProps.showMessageTimeForEachMessage && prevProps.messageReaction === nextProps.messageReaction && prevProps.editMessage === nextProps.editMessage && prevProps.copyMessage === nextProps.copyMessage && prevProps.replyMessage === nextProps.replyMessage && prevProps.replyMessageInThread === nextProps.replyMessageInThread && prevProps.forwardMessage === nextProps.forwardMessage && prevProps.deleteMessage === nextProps.deleteMessage && prevProps.selectMessage === nextProps.selectMessage && prevProps.allowEditDeleteIncomingMessage === nextProps.allowEditDeleteIncomingMessage && prevProps.reportMessage === nextProps.reportMessage && prevProps.reactionIcon === nextProps.reactionIcon && prevProps.editIcon === nextProps.editIcon && prevProps.copyIcon === nextProps.copyIcon && prevProps.replyIcon === nextProps.replyIcon && prevProps.replyInThreadIcon === nextProps.replyInThreadIcon && prevProps.forwardIcon === nextProps.forwardIcon && prevProps.deleteIcon === nextProps.deleteIcon && prevProps.selectIcon === nextProps.selectIcon && prevProps.starIcon === nextProps.starIcon && prevProps.staredIcon === nextProps.staredIcon && prevProps.reportIcon === nextProps.reportIcon && prevProps.fixEmojiCategoriesTitleOnTop === nextProps.fixEmojiCategoriesTitleOnTop && prevProps.emojisCategoryIconsPosition === nextProps.emojisCategoryIconsPosition && prevProps.emojisContainerBorderRadius === nextProps.emojisContainerBorderRadius && prevProps.reactionIconOrder === nextProps.reactionIconOrder && prevProps.editIconOrder === nextProps.editIconOrder && prevProps.copyIconOrder === nextProps.copyIconOrder && prevProps.replyIconOrder === nextProps.replyIconOrder && prevProps.replyInThreadIconOrder === nextProps.replyInThreadIconOrder && prevProps.forwardIconOrder === nextProps.forwardIconOrder && prevProps.deleteIconOrder === nextProps.deleteIconOrder && prevProps.selectIconOrder === nextProps.selectIconOrder && prevProps.starIconOrder === nextProps.starIconOrder && prevProps.reportIconOrder === nextProps.reportIconOrder && prevProps.reactionIconTooltipText === nextProps.reactionIconTooltipText && prevProps.editIconTooltipText === nextProps.editIconTooltipText && prevProps.copyIconTooltipText === nextProps.copyIconTooltipText && prevProps.replyIconTooltipText === nextProps.replyIconTooltipText && prevProps.replyInThreadIconTooltipText === nextProps.replyInThreadIconTooltipText && prevProps.forwardIconTooltipText === nextProps.forwardIconTooltipText && prevProps.deleteIconTooltipText === nextProps.deleteIconTooltipText && prevProps.selectIconTooltipText === nextProps.selectIconTooltipText && prevProps.starIconTooltipText === nextProps.starIconTooltipText && prevProps.reportIconTooltipText === nextProps.reportIconTooltipText && prevProps.messageActionIconsColor === nextProps.messageActionIconsColor && prevProps.inlineReactionIcon === nextProps.inlineReactionIcon && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.fileAttachmentsBoxWidth === nextProps.fileAttachmentsBoxWidth && prevProps.fileAttachmentsBoxBackground === nextProps.fileAttachmentsBoxBackground && prevProps.fileAttachmentsBoxBorder === nextProps.fileAttachmentsBoxBorder && prevProps.fileAttachmentsTitleColor === nextProps.fileAttachmentsTitleColor && prevProps.fileAttachmentsSizeColor === nextProps.fileAttachmentsSizeColor && prevProps.fileAttachmentsIcon === nextProps.fileAttachmentsIcon && prevProps.imageAttachmentMaxWidth === nextProps.imageAttachmentMaxWidth && prevProps.imageAttachmentMaxHeight === nextProps.imageAttachmentMaxHeight && prevProps.videoAttachmentMaxWidth === nextProps.videoAttachmentMaxWidth && prevProps.videoAttachmentMaxHeight === nextProps.videoAttachmentMaxHeight && prevProps.messageTextFontSize === nextProps.messageTextFontSize && prevProps.messageTextLineHeight === nextProps.messageTextLineHeight && prevProps.messageActionsShow === nextProps.messageActionsShow && prevProps.emojisPopupOpen === nextProps.emojisPopupOpen && prevProps.emojisPopupPosition === nextProps.emojisPopupPosition && prevProps.frequentlyEmojisOpen === nextProps.frequentlyEmojisOpen && (((_prevProps$ogMetadata = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata === void 0 ? void 0 : _prevProps$ogMetadata.ogLayoutOrder) || 'og-first') === (((_nextProps$ogMetadata = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata === void 0 ? void 0 : _nextProps$ogMetadata.ogLayoutOrder) || 'og-first') && ((_prevProps$ogMetadata2 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata2 === void 0 ? void 0 : _prevProps$ogMetadata2.ogShowUrl) === ((_nextProps$ogMetadata2 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata2 === void 0 ? void 0 : _nextProps$ogMetadata2.ogShowUrl) && ((_prevProps$ogMetadata3 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata3 === void 0 ? void 0 : _prevProps$ogMetadata3.ogShowTitle) === ((_nextProps$ogMetadata3 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata3 === void 0 ? void 0 : _nextProps$ogMetadata3.ogShowTitle) && ((_prevProps$ogMetadata4 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata4 === void 0 ? void 0 : _prevProps$ogMetadata4.ogShowDescription) === ((_nextProps$ogMetadata4 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata4 === void 0 ? void 0 : _nextProps$ogMetadata4.ogShowDescription) && ((_prevProps$ogMetadata5 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata5 === void 0 ? void 0 : _prevProps$ogMetadata5.ogShowFavicon) === ((_nextProps$ogMetadata5 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata5 === void 0 ? void 0 : _nextProps$ogMetadata5.ogShowFavicon) && ((_prevProps$ogMetadata6 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata6 === void 0 ? void 0 : _prevProps$ogMetadata6.order) === ((_nextProps$ogMetadata6 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata6 === void 0 ? void 0 : _nextProps$ogMetadata6.order) && prevProps.collapsedCharacterLimit === nextProps.collapsedCharacterLimit);
 });
 var ForwardedTitle = styled.h3(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  // margin: ", ";\n  margin: 0;\n  padding: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n\n  & > svg {\n    margin-right: 4px;\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
@@ -39037,7 +39902,6 @@ var Message$1 = function Message(_ref) {
     openedMessageMenuId = _ref.openedMessageMenuId,
     tabIsActive = _ref.tabIsActive,
     connectionStatus = _ref.connectionStatus,
-    theme = _ref.theme,
     messageTextFontSize = _ref.messageTextFontSize,
     messageTextLineHeight = _ref.messageTextLineHeight,
     messageTimeColorOnAttachment = _ref.messageTimeColorOnAttachment,
@@ -39558,7 +40422,6 @@ var Message$1 = function Message(_ref) {
     contactsMap: contactsMap,
     openedMessageMenuId: openedMessageMenuId,
     connectionStatus: connectionStatus,
-    theme: theme,
     messageTextFontSize: messageTextFontSize,
     messageTextLineHeight: messageTextLineHeight,
     messageActionsShow: messageActionsShow,
@@ -39695,7 +40558,7 @@ var Message$1 = function Message(_ref) {
   })));
 };
 var Message$2 = /*#__PURE__*/React__default.memo(Message$1, function (prevProps, nextProps) {
-  return prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.metadata === nextProps.message.metadata && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.message.pollDetails === nextProps.message.pollDetails && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.theme === nextProps.theme;
+  return prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.metadata === nextProps.message.metadata && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.message.pollDetails === nextProps.message.pollDetails && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId;
 });
 var MessageReactionKey = styled.span(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n"])));
 var ReactionItemCount = styled.span(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n  margin-left: 2px;\n  font-family: Inter, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
@@ -39812,7 +40675,6 @@ var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
     dateDividerBackgroundColor = _ref.dateDividerBackgroundColor,
     dateDividerBorderRadius = _ref.dateDividerBorderRadius,
     noMargin = _ref.noMargin,
-    theme = _ref.theme,
     marginBottom = _ref.marginBottom,
     marginTop = _ref.marginTop,
     chatBackgroundColor = _ref.chatBackgroundColor;
@@ -39826,7 +40688,6 @@ var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
     dividerText = moment().year() === moment(current).year() ? current.format('MMMM D') : current.format('MMMM D YYYY');
   }
   return !differentDays ? null : (/*#__PURE__*/React__default.createElement(MessageDivider, {
-    theme: theme,
     dividerText: dividerText,
     visibility: messagesHasNext && lastIndex,
     dateDividerFontSize: dateDividerFontSize,
@@ -40008,7 +40869,6 @@ var MessageList = function MessageList(_ref2) {
   var ChatClient = getClient();
   var user = ChatClient.user;
   var dispatch = useDispatch();
-  var theme = useSelector(themeSelector);
   var channel = useSelector(activeChannelSelector);
   var _useState = useState(false),
     scrollIntoView = _useState[0],
@@ -40683,7 +41543,6 @@ var MessageList = function MessageList(_ref2) {
       key: message.id || message.tid
     }, /*#__PURE__*/React__default.createElement(CreateMessageDateDivider, {
       noMargin: !isUnreadMessage && prevMessage && prevMessage.type === MESSAGE_TYPE.SYSTEM && message.type !== MESSAGE_TYPE.SYSTEM,
-      theme: theme,
       lastIndex: false,
       currentMessageDate: message.createdAt,
       nextMessageDate: prevMessage && prevMessage.createdAt,
@@ -40718,7 +41577,6 @@ var MessageList = function MessageList(_ref2) {
       highlightBg: incomingMessageBackgroundX
     }, /*#__PURE__*/React__default.createElement(Message$2, {
       message: message,
-      theme: theme,
       channel: channel,
       stopScrolling: setStopScrolling,
       handleMediaItemClick: function handleMediaItemClick(attachment) {
@@ -40855,7 +41713,6 @@ var MessageList = function MessageList(_ref2) {
       ogMetadataProps: ogMetadataProps,
       collapsedCharacterLimit: collapsedCharacterLimit
     }))), isUnreadMessage ? (/*#__PURE__*/React__default.createElement(MessageDivider, {
-      theme: theme,
       newMessagesSeparatorTextColor: newMessagesSeparatorTextColor,
       newMessagesSeparatorFontSize: newMessagesSeparatorFontSize,
       newMessagesSeparatorWidth: newMessagesSeparatorWidth,
@@ -44454,7 +45311,6 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var ChatClient = getClient();
   var user = ChatClient.user;
   var channelDetailsIsOpen = useSelector(channelInfoIsOpenSelector, shallowEqual);
-  var theme = useSelector(themeSelector);
   var getFromContacts = getShowOnlyContactUsers();
   var activeChannel = useSelector(activeChannelSelector);
   var messageToEdit = useSelector(messageToEditSelector);
@@ -45896,7 +46752,6 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     color: viewOnce ? accentColor : iconInactive,
     textColor: viewOnce ? textOnPrimary : iconInactive
   }, viewOnce ? ViewOnceSelectedSVGIcon || /*#__PURE__*/React__default.createElement(SvgViewOnceSelected, null) : ViewOnceNotSelectedSVGIcon || /*#__PURE__*/React__default.createElement(SvgViewOnceNotSelected, null))), showAddAttachments && addAttachmentByMenu && !messageToEdit ? (/*#__PURE__*/React__default.createElement(DropDown, {
-    theme: theme,
     forceClose: showChooseAttachmentType,
     position: addAttachmentsInRightSide ? 'top' : 'topRight',
     margin: 'auto 0 0',
@@ -46516,8 +47371,7 @@ function SvgUsers(props) {
 
 var _templateObject$T, _templateObject2$O, _templateObject3$H;
 function NetworkErrorPopup(_ref) {
-  var theme = _ref.theme,
-    togglePopup = _ref.togglePopup;
+  var togglePopup = _ref.togglePopup;
   var colors = useColors();
   var accentColor = colors[THEME_COLORS.ACCENT],
     background = colors[THEME_COLORS.BACKGROUND],
@@ -46526,7 +47380,6 @@ function NetworkErrorPopup(_ref) {
     iconPrimary = colors[THEME_COLORS.ICON_PRIMARY],
     textOnPrimary = colors[THEME_COLORS.TEXT_ON_PRIMARY];
   return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
-    theme: theme,
     backgroundColor: background,
     maxWidth: '522px',
     minWidth: '522px',
@@ -46576,8 +47429,7 @@ var TIMER_OPTIONS = [{
   label: '1 month'
 }];
 function DisappearingMessagesPopup(_ref) {
-  var theme = _ref.theme,
-    togglePopup = _ref.togglePopup,
+  var togglePopup = _ref.togglePopup,
     handleSetTimer = _ref.handleSetTimer,
     currentTimer = _ref.currentTimer;
   var colors = useColors();
@@ -46687,11 +47539,9 @@ function DisappearingMessagesPopup(_ref) {
     })) === null || _CUSTOM_OPTIONS$find === void 0 ? void 0 : _CUSTOM_OPTIONS$find.label) || '2 days';
   }, [customValue, CUSTOM_OPTIONS]);
   if (showNetworkError) return /*#__PURE__*/React__default.createElement(NetworkErrorPopup, {
-    theme: theme,
     togglePopup: handleCloseNetworkError
   });
   return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
-    theme: theme,
     backgroundColor: background,
     maxWidth: '522px',
     minWidth: '522px',
@@ -46767,7 +47617,6 @@ function DisappearingMessagesPopup(_ref) {
     maxWidth: '474px'
   }, /*#__PURE__*/React__default.createElement(DropDown, {
     withIcon: true,
-    theme: theme,
     isSelect: true,
     position: 'top',
     trigger: /*#__PURE__*/React__default.createElement(CustomSelectTriggerStyled, {
@@ -46775,7 +47624,6 @@ function DisappearingMessagesPopup(_ref) {
     }, selectedCustomLabel),
     watchToggleState: setDropdownOpen
   }, /*#__PURE__*/React__default.createElement(CustomDropdownOptionsUl, {
-    theme: theme,
     accentColor: accentColor
   }, CUSTOM_OPTIONS.map(function (o) {
     return /*#__PURE__*/React__default.createElement(CustomDropdownOptionLi, {
@@ -46877,8 +47725,7 @@ var MutualChannelItem = function MutualChannelItem(_ref) {
   })));
 };
 var GroupsInCommonPopup = function GroupsInCommonPopup(_ref2) {
-  var theme = _ref2.theme,
-    togglePopup = _ref2.togglePopup,
+  var togglePopup = _ref2.togglePopup,
     user = _ref2.user;
   var ChatClient = getClient();
   var currentUser = ChatClient.user;
@@ -46929,7 +47776,6 @@ var GroupsInCommonPopup = function GroupsInCommonPopup(_ref2) {
     };
   }, [dispatch]);
   return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
-    theme: theme,
     backgroundColor: background,
     maxWidth: '520px',
     minWidth: '520px',
@@ -47003,7 +47849,6 @@ var Actions = function Actions(_ref) {
   var setActionsHeight = _ref.setActionsHeight,
     channel = _ref.channel,
     actionMenuOpen = _ref.actionMenuOpen,
-    theme = _ref.theme,
     menuIsOpen = _ref.menuIsOpen,
     toggleable = _ref.toggleable,
     _ref$showMuteUnmuteNo = _ref.showMuteUnmuteNotifications,
@@ -47235,7 +48080,6 @@ var Actions = function Actions(_ref) {
   }, [containerRef.current, showMuteUnmuteNotifications, showStarredMessages, showPinChannel, showMarkAsReadUnread, showLeaveChannel, showBlockAndLeaveChannel, showBlockUser, showReportChannel, showDeleteChannel, showClearHistory]);
   return /*#__PURE__*/React__default.createElement(Container$n, {
     isDirect: isDirectChannel,
-    theme: theme,
     borderColor: borderColor || surface1,
     ref: containerRef
   }, toggleable && (/*#__PURE__*/React__default.createElement(ActionHeader, {
@@ -47260,7 +48104,6 @@ var Actions = function Actions(_ref) {
     fontSize: actionItemsFontSize
   }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, muteNotificationIcon || /*#__PURE__*/React__default.createElement(DefaultMutedIcon, null), " Unmute notifications"))) : (/*#__PURE__*/React__default.createElement(DropDown, {
     isSelect: true,
-    theme: theme,
     height: 'auto',
     position: 'left',
     order: muteUnmuteNotificationsOrder,
@@ -47510,12 +48353,10 @@ var Actions = function Actions(_ref) {
     description: channel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? 'Once you clear the history, the messages in this chat will be permanently removed for you.' : channel.type === DEFAULT_CHANNEL_TYPE.GROUP || channel.type === DEFAULT_CHANNEL_TYPE.PRIVATE ? 'Once you clear the history it will be permanently removed for you.' : channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? 'Once you clear the history, the messages in this channel will be permanently removed for all the subscribers.' : 'Are you sure you want to delete all messages? This action cannot be undone.',
     title: popupTitle
   })), disappearingMessagesPopupOpen && (/*#__PURE__*/React__default.createElement(DisappearingMessagesPopup, {
-    theme: theme,
     togglePopup: handleToggleDisappearingMessagesPopup,
     handleSetTimer: handleSetDisappearingMessagesTimer,
     currentTimer: channel.messageRetentionPeriod
   })), groupsInCommonPopupOpen && (/*#__PURE__*/React__default.createElement(GroupsInCommonPopup, {
-    theme: theme,
     togglePopup: handleToggleGroupsInCommonPopup,
     user: channel.members.find(function (member) {
       return member.id !== user.id;
@@ -48278,8 +49119,7 @@ function SvgMoreVert(props) {
 
 var _templateObject$12, _templateObject2$W, _templateObject3$O;
 var ChangeMemberRole = function ChangeMemberRole(_ref) {
-  var theme = _ref.theme,
-    channelId = _ref.channelId,
+  var channelId = _ref.channelId,
     member = _ref.member,
     handleClosePopup = _ref.handleClosePopup;
   var connectionStatus = useSelector(connectionStatusSelector, shallowEqual);
@@ -48346,14 +49186,11 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
     disabledColor: surface1
   }, /*#__PURE__*/React__default.createElement(DropDown, {
     withIcon: true,
-    theme: theme,
     isSelect: true,
     trigger: /*#__PURE__*/React__default.createElement(CustomSelectTrigger, {
       color: textPrimary
     }, selectedRole || member.role || 'Select')
-  }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, {
-    theme: theme
-  }, !!roles.length && roles.map(function (role) {
+  }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, null, !!roles.length && roles.map(function (role) {
     return /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
       hoverBackground: backgroundHovered,
       key: role.name,
@@ -48438,7 +49275,6 @@ function InviteLinkModal(_ref) {
     border = _useColor[THEME_COLORS.BORDER],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
     tooltipBackground = _useColor[THEME_COLORS.TOOLTIP_BACKGROUND];
-  var theme = useSelector(themeSelector) || 'light';
   var connectionStatus = useSelector(connectionStatusSelector, shallowEqual);
   var channelsInviteKeys = useSelector(channelInviteKeysSelector, shallowEqual);
   var dispatch = useDispatch();
@@ -48771,7 +49607,6 @@ function InviteLinkModal(_ref) {
       },
       inviteUrl: inviteUrl,
       channelId: channelId,
-      theme: theme,
       colors: {
         accentColor: accentColor,
         textPrimary: textPrimary,
@@ -48956,7 +49791,6 @@ var Members = function Members(_ref) {
   var _members$find;
   var channel = _ref.channel,
     members = _ref.members,
-    theme = _ref.theme,
     checkActionPermission = _ref.checkActionPermission,
     _ref$showChangeMember = _ref.showChangeMemberRole,
     showChangeMemberRole = _ref$showChangeMember === void 0 ? true : _ref$showChangeMember,
@@ -49123,9 +49957,7 @@ var Members = function Members(_ref) {
   var currentUserRole = (_members$find = members.find(function (member) {
     return member.id === user.id;
   })) === null || _members$find === void 0 ? void 0 : _members$find.role;
-  return /*#__PURE__*/React__default.createElement(Container$s, {
-    theme: theme
-  }, /*#__PURE__*/React__default.createElement(ActionsMenu$1, null, /*#__PURE__*/React__default.createElement(MembersList, null, checkActionPermission('addMember') && (currentUserRole === 'owner' || currentUserRole === 'admin') && (/*#__PURE__*/React__default.createElement(MemberItem$1, {
+  return /*#__PURE__*/React__default.createElement(Container$s, null, /*#__PURE__*/React__default.createElement(ActionsMenu$1, null, /*#__PURE__*/React__default.createElement(MembersList, null, checkActionPermission('addMember') && (currentUserRole === 'owner' || currentUserRole === 'admin') && (/*#__PURE__*/React__default.createElement(MemberItem$1, {
     key: 1,
     onClick: handleAddMemberPopup,
     color: textPrimary,
@@ -49163,7 +49995,6 @@ var Members = function Members(_ref) {
       margin: '1px 0 0',
       fontSize: memberPresenceFontSize
     }, member.presence && member.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : member.presence && member.presence.lastActiveAt && userLastActiveDateFormat(member.presence.lastActiveAt))), !noMemberEditPermissions && member.role !== 'owner' && currentUserRole && (rolesMap === null || rolesMap === void 0 ? void 0 : (_rolesMap$member$role = rolesMap[member.role]) === null || _rolesMap$member$role === void 0 ? void 0 : _rolesMap$member$role.priority) && (rolesMap === null || rolesMap === void 0 ? void 0 : (_rolesMap$currentUser = rolesMap[currentUserRole]) === null || _rolesMap$currentUser === void 0 ? void 0 : _rolesMap$currentUser.priority) && (rolesMap === null || rolesMap === void 0 ? void 0 : (_rolesMap$member$role2 = rolesMap[member.role]) === null || _rolesMap$member$role2 === void 0 ? void 0 : _rolesMap$member$role2.priority) < (rolesMap === null || rolesMap === void 0 ? void 0 : (_rolesMap$currentUser2 = rolesMap[currentUserRole]) === null || _rolesMap$currentUser2 === void 0 ? void 0 : _rolesMap$currentUser2.priority) && member.id !== user.id && (/*#__PURE__*/React__default.createElement(DropDown, {
-      theme: theme,
       isSelect: true,
       forceClose: !!(closeMenu && closeMenu !== member.id),
       watchToggleState: function watchToggleState(state) {
@@ -49212,21 +50043,18 @@ var Members = function Members(_ref) {
       }
     }, "Remove and Block member"))))));
   }))), kickMemberPopupOpen && (/*#__PURE__*/React__default.createElement(ConfirmPopup, {
-    theme: theme,
     handleFunction: handleKickMember,
     togglePopup: toggleKickMemberPopup,
     buttonText: 'Remove',
     title: channel.type === DEFAULT_CHANNEL_TYPE.GROUP || channel.type === DEFAULT_CHANNEL_TYPE.PRIVATE ? 'Remove member' : 'Remove subscriber',
     description: /*#__PURE__*/React__default.createElement("span", null, "Are you sure to remove", !!selectedMember && (/*#__PURE__*/React__default.createElement(BoltText, null, " ", makeUsername(contactsMap[selectedMember.id], selectedMember, getFromContacts), " ")), "from this", ' ', channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? 'channel' : 'group', "?")
   })), blockMemberPopupOpen && (/*#__PURE__*/React__default.createElement(ConfirmPopup, {
-    theme: theme,
     handleFunction: handleBlockMember,
     togglePopup: toggleBlockMemberPopup,
     buttonText: 'Block',
     description: "Block and remove member - " + (selectedMember && (selectedMember.firstName || selectedMember.lastName || selectedMember.id)),
     title: 'Block and remove user'
   })), makeAdminPopup && (/*#__PURE__*/React__default.createElement(ConfirmPopup, {
-    theme: theme,
     handleFunction: handleMakeAdmin,
     togglePopup: function togglePopup() {
       return toggleMakeAdminPopup(undefined, false);
@@ -49242,10 +50070,8 @@ var Members = function Members(_ref) {
     },
     buttonText: 'Revoke',
     title: 'Revoke admin',
-    theme: theme,
     description: /*#__PURE__*/React__default.createElement("span", null, "Are you sure you want to revoke", /*#__PURE__*/React__default.createElement(BoltText, null, " \u201CAdmin\u201D "), "rights from user:", selectedMember && (/*#__PURE__*/React__default.createElement(BoltText, null, " ", makeUsername(contactsMap[selectedMember.id], selectedMember, getFromContacts), " ")), "?")
   })), changeMemberRolePopup && (/*#__PURE__*/React__default.createElement(ChangeMemberRole, {
-    theme: theme,
     channelId: channel.id,
     member: selectedMember,
     handleClosePopup: toggleChangeRolePopup
@@ -49299,7 +50125,6 @@ var RoleBadge = styled.span(_templateObject9$n || (_templateObject9$n = _taggedT
 var _templateObject$15, _templateObject2$Z;
 var DetailsTab = function DetailsTab(_ref) {
   var channel = _ref.channel,
-    theme = _ref.theme,
     activeTab = _ref.activeTab,
     checkActionPermission = _ref.checkActionPermission,
     setActiveTab = _ref.setActiveTab,
@@ -49369,9 +50194,7 @@ var DetailsTab = function DetailsTab(_ref) {
       setActiveTab(channelDetailsTabs.member);
     }
   }, [showMembers]);
-  return /*#__PURE__*/React__default.createElement(Container$t, {
-    theme: theme
-  }, /*#__PURE__*/React__default.createElement(DetailsTabHeader, {
+  return /*#__PURE__*/React__default.createElement(Container$t, null, /*#__PURE__*/React__default.createElement(DetailsTabHeader, {
     color: textSecondary,
     activeTabColor: accentColor,
     borderColor: borderColor || border,
@@ -49404,7 +50227,6 @@ var DetailsTab = function DetailsTab(_ref) {
       key: key
     }, /*#__PURE__*/React__default.createElement("span", null, channelDetailsTabs[tabKey]));
   })), showMembers && activeTab === channelDetailsTabs.member && (/*#__PURE__*/React__default.createElement(Members, {
-    theme: theme,
     members: members,
     channel: channel,
     checkActionPermission: checkActionPermission,
@@ -49423,7 +50245,6 @@ var DetailsTab = function DetailsTab(_ref) {
     channel: channel
   }), activeTab === channelDetailsTabs.file && (/*#__PURE__*/React__default.createElement(Files, {
     channelId: channel.id,
-    theme: theme,
     filePreviewIcon: filePreviewIcon,
     filePreviewHoverIcon: filePreviewHoverIcon,
     filePreviewTitleColor: filePreviewTitleColor,
@@ -49484,7 +50305,6 @@ var DropDownWrapper = styled.div(_templateObject3$R || (_templateObject3$R = _ta
 var EditChannelFooter = styled(ButtonBlock)(_templateObject4$J || (_templateObject4$J = _taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n\n  & > button {\n    margin-left: 12px;\n  }\n"])));
 var EditChannel = function EditChannel(_ref) {
   var channel = _ref.channel,
-    theme = _ref.theme,
     handleToggleEditMode = _ref.handleToggleEditMode,
     editChannelSaveButtonBackgroundColor = _ref.editChannelSaveButtonBackgroundColor,
     editChannelSaveButtonTextColor = _ref.editChannelSaveButtonTextColor,
@@ -49639,7 +50459,6 @@ var EditChannel = function EditChannel(_ref) {
     active: isEditMode,
     backgroundColor: background
   }, /*#__PURE__*/React__default.createElement(AvatarCont, null, /*#__PURE__*/React__default.createElement(DropDownWrapper, null, !isDirectChannel && channel.userRole && (/*#__PURE__*/React__default.createElement(DropDown, {
-    theme: theme,
     position: 'center',
     iconColor: iconPrimary,
     trigger: getUploadImageIcon() || /*#__PURE__*/React__default.createElement(SvgCameraIcon, null)
@@ -49671,7 +50490,6 @@ var EditChannel = function EditChannel(_ref) {
     color: textPrimary
   }, " Name "), /*#__PURE__*/React__default.createElement(CustomInput, {
     error: subjectIsWrong,
-    theme: theme,
     color: textPrimary,
     borderColor: borderColor,
     errorColor: warningColor,
@@ -49689,7 +50507,6 @@ var EditChannel = function EditChannel(_ref) {
     color: textPrimary
   }, " Description "), /*#__PURE__*/React__default.createElement(CustomInput, {
     error: descriptionIsWrong,
-    theme: theme,
     color: textPrimary,
     errorColor: warningColor,
     borderColor: borderColor,
@@ -49718,7 +50535,6 @@ var EditChannel = function EditChannel(_ref) {
     backgroundColor: editChannelSaveButtonBackgroundColor || accentColor,
     onClick: handleSave
   }, "Save"))), cropPopup && (/*#__PURE__*/React__default.createElement(ImageCrop, {
-    theme: theme,
     image: {
       name: newAvatar.name,
       url: selectedImageUrl
@@ -49872,7 +50688,6 @@ var Details = function Details(_ref) {
   var dispatch = useDispatch();
   var ChatClient = getClient();
   var user = ChatClient.user;
-  var theme = useSelector(themeSelector);
   var getFromContacts = getShowOnlyContactUsers();
   var _useState = useState(false),
     mounted = _useState[0],
@@ -49990,7 +50805,6 @@ var Details = function Details(_ref) {
     backgroundColor: backgroundColor,
     mounted: mounted,
     size: size,
-    theme: theme,
     borderColor: bordersColor || borderThemeColor
   }, /*#__PURE__*/React__default.createElement(ChannelDetailsHeader, {
     borderColor: bordersColor || borderThemeColor
@@ -50010,7 +50824,6 @@ var Details = function Details(_ref) {
     color: accentColor,
     onClick: handleDetailsClose
   })))), editMode && (/*#__PURE__*/React__default.createElement(EditChannel, {
-    theme: theme,
     channel: activeChannel,
     handleToggleEditMode: setEditMode,
     editChannelSaveButtonBackgroundColor: editChannelSaveButtonBackgroundColor,
@@ -50077,7 +50890,6 @@ var Details = function Details(_ref) {
     color: textPrimary
   }, channelMetadata !== null && channelMetadata !== void 0 && channelMetadata.d ? channelMetadata === null || channelMetadata === void 0 ? void 0 : channelMetadata.d : '')))), activeChannel && activeChannel.userRole && (/*#__PURE__*/React__default.createElement(Actions, {
     setActionsHeight: setActionsHeight,
-    theme: theme,
     showMuteUnmuteNotifications: showMuteUnmuteNotifications,
     muteUnmuteNotificationsOrder: muteUnmuteNotificationsOrder,
     unmuteNotificationIcon: unmuteNotificationIcon,
@@ -50144,7 +50956,6 @@ var Details = function Details(_ref) {
     commonGroupsTextColor: commonGroupsTextColor,
     showGroupsInCommon: showGroupsInCommon
   })), !(activeChannel && activeChannel.isMockChannel) && (/*#__PURE__*/React__default.createElement(DetailsTab, {
-    theme: theme,
     channel: activeChannel,
     activeTab: activeTab,
     setActiveTab: setActiveTab,
@@ -50527,7 +51338,6 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
     backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS];
   var dispatch = useDispatch();
   var channel = useSelector(activeChannelSelector);
-  var theme = useSelector(themeSelector);
   var sendMessageInputHeight = useSelector(sendMessageInputHeightSelector);
   var showScrollToNewMessageButton = useSelector(showScrollToNewMessageButtonSelector);
   var messages = useSelector(activeChannelMessagesSelector) || [];
@@ -50566,7 +51376,6 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BottomButton, {
     show: !!showScrollToNewMessageButton,
     animateFrom: animateFrom,
-    theme: theme,
     width: buttonWidth,
     height: buttonHeight,
     border: buttonBorder,
@@ -50664,7 +51473,6 @@ var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentio
     backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS];
   var dispatch = useDispatch();
   var channel = useSelector(activeChannelSelector);
-  var theme = useSelector(themeSelector);
   var sendMessageInputHeight = useSelector(sendMessageInputHeightSelector);
   var showScrollToNewMessageButton = useSelector(showScrollToNewMessageButtonSelector);
   var messages = useSelector(activeChannelMessagesSelector) || [];
@@ -50758,7 +51566,6 @@ var MessagesScrollToUnreadMentionsButton = function MessagesScrollToUnreadMentio
     }
   }, [channel.newMentionCount]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BottomButton$1, {
-    theme: theme,
     animateFrom: animateFrom,
     show: !!channel.newMentionCount,
     width: buttonWidth,