@zuzjs/ui 0.7.8 → 0.8.0

package/dist/esm/hooks/useMediaPlayer.js

@@ -0,0 +1,86 @@
+"use client";
+import { useCallback, useRef, useState } from "react";
+const useMediaPlayer = ({ src, type = "video", autoPlay = false, loop = false, controls = false }) => {
+    const mediaRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(autoPlay);
+    const [volume, setVolume] = useState(1);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    // Play / Pause toggle
+    const togglePlay = useCallback(() => {
+        if (mediaRef.current) {
+            if (mediaRef.current.paused) {
+                mediaRef.current.play();
+                setIsPlaying(true);
+            }
+            else {
+                mediaRef.current.pause();
+                setIsPlaying(false);
+            }
+        }
+    }, []);
+    // Seek media
+    const seek = useCallback((time) => {
+        if (mediaRef.current) {
+            mediaRef.current.currentTime = time;
+            setCurrentTime(time);
+        }
+    }, []);
+    // Change volume
+    const changeVolume = useCallback((newVolume) => {
+        if (mediaRef.current) {
+            mediaRef.current.volume = newVolume;
+            setVolume(newVolume);
+        }
+    }, []);
+    // Toggle fullscreen (only for video)
+    const toggleFullscreen = useCallback(() => {
+        if (type === "video" && mediaRef.current) {
+            if (!document.fullscreenElement) {
+                mediaRef.current.requestFullscreen?.();
+                setIsFullscreen(true);
+            }
+            else {
+                document.exitFullscreen?.();
+                setIsFullscreen(false);
+            }
+        }
+    }, [type]);
+    // Update time
+    const handleTimeUpdate = useCallback(() => {
+        if (mediaRef.current) {
+            setCurrentTime(mediaRef.current.currentTime);
+        }
+    }, []);
+    // Set duration
+    const handleLoadedMetadata = useCallback(() => {
+        if (mediaRef.current) {
+            setDuration(mediaRef.current.duration);
+        }
+    }, []);
+    return {
+        mediaRef,
+        isPlaying,
+        togglePlay,
+        seek,
+        volume,
+        changeVolume,
+        isFullscreen,
+        toggleFullscreen,
+        currentTime,
+        duration,
+        handleTimeUpdate,
+        handleLoadedMetadata,
+        mediaProps: {
+            ref: mediaRef,
+            src,
+            autoPlay,
+            loop,
+            controls,
+            onTimeUpdate: handleTimeUpdate,
+            onLoadedMetadata: handleLoadedMetadata,
+        },
+    };
+};
+export default useMediaPlayer;

package/dist/esm/hooks/useMergedRefs.d.ts

@@ -0,0 +1,2 @@
+declare const useMergedRefs: <T>(...refs: (React.Ref<T> | undefined)[]) => (node: T) => void;
+export default useMergedRefs;

package/dist/esm/hooks/useMergedRefs.js

@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+const useMergedRefs = (...refs) => {
+    return useCallback((node) => {
+        refs.forEach((ref) => {
+            if (!ref)
+                return;
+            if (typeof ref === "function")
+                ref(node);
+            else if ("current" in ref)
+                ref.current = node;
+        });
+    }, [refs]);
+};
+export default useMergedRefs;

package/dist/esm/hooks/useMutationObserver.d.ts

@@ -0,0 +1,3 @@
+export type MutationCallback = (mutations: MutationRecord[], observer: MutationObserver) => void;
+declare const useMutationObserver: (target: HTMLElement | null, callback: MutationCallback, options?: MutationObserverInit) => void;
+export default useMutationObserver;

package/dist/esm/hooks/useMutationObserver.js

@@ -0,0 +1,20 @@
+"use client";
+import { useEffect, useRef } from "react";
+const useMutationObserver = (target, callback, options = { childList: true, subtree: true }) => {
+    const observerRef = useRef(null);
+    useEffect(() => {
+        if (!target)
+            return;
+        // Create a new MutationObserver and pass the callback
+        observerRef.current = new MutationObserver(callback);
+        // Start observing the target element
+        observerRef.current.observe(target, options);
+        // Cleanup function to disconnect the observer
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+        };
+    }, [target, callback, options]);
+};
+export default useMutationObserver;

package/dist/esm/hooks/useNetworkStatus.js

@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+"use client";
+import { useEffect, useState } from 'react';
 const useNetworkStatus = () => {
     const [isOnline, setIsOnline] = useState(null);
     const updateNetworkStatus = () => {

package/dist/esm/hooks/usePlayer.d.ts

@@ -0,0 +1,32 @@
+export type MediaType = "video" | "audio";
+export type MediaPlayerProps = {
+    src: string;
+    type?: MediaType;
+    autoPlay?: boolean;
+    loop?: boolean;
+    controls?: boolean;
+};
+declare const useMediaPlayer: ({ src, type, autoPlay, loop, controls }: MediaPlayerProps) => {
+    mediaRef: import("react").RefObject<(HTMLVideoElement & HTMLAudioElement) | null>;
+    isPlaying: boolean;
+    togglePlay: () => void;
+    seek: (time: number) => void;
+    volume: number;
+    changeVolume: (newVolume: number) => void;
+    isFullscreen: boolean;
+    toggleFullscreen: () => void;
+    currentTime: number;
+    duration: number;
+    handleTimeUpdate: () => void;
+    handleLoadedMetadata: () => void;
+    mediaProps: {
+        ref: import("react").RefObject<(HTMLVideoElement & HTMLAudioElement) | null>;
+        src: string;
+        autoPlay: boolean;
+        loop: boolean;
+        controls: boolean;
+        onTimeUpdate: () => void;
+        onLoadedMetadata: () => void;
+    };
+};
+export default useMediaPlayer;

package/dist/esm/hooks/usePlayer.js

@@ -0,0 +1,85 @@
+import { useCallback, useRef, useState } from "react";
+const useMediaPlayer = ({ src, type = "video", autoPlay = false, loop = false, controls = false }) => {
+    const mediaRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(autoPlay);
+    const [volume, setVolume] = useState(1);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    // Play / Pause toggle
+    const togglePlay = useCallback(() => {
+        if (mediaRef.current) {
+            if (mediaRef.current.paused) {
+                mediaRef.current.play();
+                setIsPlaying(true);
+            }
+            else {
+                mediaRef.current.pause();
+                setIsPlaying(false);
+            }
+        }
+    }, []);
+    // Seek media
+    const seek = useCallback((time) => {
+        if (mediaRef.current) {
+            mediaRef.current.currentTime = time;
+            setCurrentTime(time);
+        }
+    }, []);
+    // Change volume
+    const changeVolume = useCallback((newVolume) => {
+        if (mediaRef.current) {
+            mediaRef.current.volume = newVolume;
+            setVolume(newVolume);
+        }
+    }, []);
+    // Toggle fullscreen (only for video)
+    const toggleFullscreen = useCallback(() => {
+        if (type === "video" && mediaRef.current) {
+            if (!document.fullscreenElement) {
+                mediaRef.current.requestFullscreen?.();
+                setIsFullscreen(true);
+            }
+            else {
+                document.exitFullscreen?.();
+                setIsFullscreen(false);
+            }
+        }
+    }, [type]);
+    // Update time
+    const handleTimeUpdate = useCallback(() => {
+        if (mediaRef.current) {
+            setCurrentTime(mediaRef.current.currentTime);
+        }
+    }, []);
+    // Set duration
+    const handleLoadedMetadata = useCallback(() => {
+        if (mediaRef.current) {
+            setDuration(mediaRef.current.duration);
+        }
+    }, []);
+    return {
+        mediaRef,
+        isPlaying,
+        togglePlay,
+        seek,
+        volume,
+        changeVolume,
+        isFullscreen,
+        toggleFullscreen,
+        currentTime,
+        duration,
+        handleTimeUpdate,
+        handleLoadedMetadata,
+        mediaProps: {
+            ref: mediaRef,
+            src,
+            autoPlay,
+            loop,
+            controls,
+            onTimeUpdate: handleTimeUpdate,
+            onLoadedMetadata: handleLoadedMetadata,
+        },
+    };
+};
+export default useMediaPlayer;

package/dist/esm/hooks/useResizeObserver.js

@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+"use client";
+import { useEffect, useState } from 'react';
 const useResizeObserver = (ref) => {
     const [size, setSize] = useState({ width: 0, height: 0, top: 0, left: 0 });
     useEffect(() => {

package/dist/esm/hooks/useScrollbar.d.ts

@@ -0,0 +1,16 @@
+export interface ScrollBreakpoint {
+    [key: number]: () => void;
+}
+declare const useScrollbar: (breakpoints?: ScrollBreakpoint) => {
+    rootRef: import("react").RefObject<HTMLDivElement | null>;
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    thumbY: import("react").RefObject<HTMLDivElement | null>;
+    thumbX: import("react").RefObject<HTMLDivElement | null>;
+    scrollToTop: () => void | undefined;
+    scrollToBottom: () => void | undefined;
+    scrollToLeft: () => void | undefined;
+    scrollToRight: () => void | undefined;
+    onScrollY: (e: React.MouseEvent) => void;
+    onScrollX: (e: React.MouseEvent) => void;
+};
+export default useScrollbar;

package/dist/esm/hooks/useScrollbar.js

@@ -0,0 +1,160 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+import { useMutationObserver } from "..";
+const useScrollbar = (breakpoints = {}) => {
+    const rootRef = useRef(null);
+    const containerRef = useRef(null);
+    const thumbY = useRef(null);
+    const thumbX = useRef(null);
+    const isDraggingY = useRef(false);
+    const isDraggingX = useRef(false);
+    const dragStartX = useRef(0);
+    const dragStartY = useRef(0);
+    const scrollStartY = useRef(0);
+    const scrollStartX = useRef(0);
+    const thumbHeight = useRef(30); // Default min height
+    const thumbWidth = useRef(30); // Default min height
+    const updateThumb = useCallback(() => {
+        if (!containerRef.current || !thumbY.current || !thumbX.current)
+            return;
+        const { clientHeight, scrollHeight, scrollTop, clientWidth, scrollWidth, scrollLeft } = containerRef.current;
+        //Y thumb
+        const thumbSizeY = Math.max((clientHeight / scrollHeight) * clientHeight, 30); // Min thumb size: 30px
+        thumbHeight.current = thumbSizeY;
+        const thumbPosY = (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - thumbSizeY);
+        thumbY.current.style.height = `${thumbSizeY}px`;
+        thumbY.current.style.top = `${thumbPosY}px`;
+        //X thumb
+        const thumbSizeX = Math.max((clientWidth / scrollWidth) * clientWidth, 30); // Min thumb size: 30px
+        thumbWidth.current = thumbSizeX;
+        const thumbPosX = (scrollLeft / (scrollWidth - clientWidth)) * (clientWidth - thumbSizeX);
+        thumbX.current.style.width = `${thumbSizeX}px`;
+        thumbX.current.style.left = `${thumbPosX}px`;
+        if (thumbY.current.clientHeight == clientHeight && rootRef) {
+            rootRef.current?.classList.add(`--no-y`);
+        }
+        else
+            rootRef.current?.classList.remove(`--no-y`);
+        if (thumbX.current.clientWidth == clientWidth && rootRef) {
+            rootRef.current?.classList.add(`--no-x`);
+        }
+        else
+            rootRef.current?.classList.remove(`--no-x`);
+    }, []);
+    const postScroll = (scrollPercentY) => {
+        updateThumb();
+        // Trigger breakpoints
+        Object.keys(breakpoints).forEach((key) => {
+            const breakpoint = parseFloat(key);
+            if (Math.abs(scrollPercentY - breakpoint) < 1) {
+                breakpoints[breakpoint]?.();
+            }
+        });
+    };
+    const handleScroll = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = containerRef.current;
+        const scrollPercentY = (scrollTop / (scrollHeight - clientHeight)) * 100;
+        const scrollPercentX = (scrollLeft / (scrollWidth - clientWidth)) * 100;
+        postScroll(scrollPercentY);
+        postScroll(scrollPercentX);
+    }, [breakpoints, updateThumb]);
+    // Dragging logic
+    const onScrollY = (e) => {
+        isDraggingY.current = true;
+        dragStartY.current = e.clientY;
+        scrollStartY.current = containerRef.current?.scrollTop || 0;
+        document.body.style.userSelect = "none";
+        if (rootRef.current)
+            rootRef.current?.classList.add(`--scrolling`);
+    };
+    const onScrollX = (e) => {
+        isDraggingX.current = true;
+        dragStartX.current = e.clientX;
+        scrollStartX.current = containerRef.current?.scrollLeft || 0;
+        document.body.style.userSelect = "none";
+        if (rootRef.current)
+            rootRef.current?.classList.add(`--scrolling`);
+    };
+    const handleDragMove = useCallback((e) => {
+        if (!containerRef.current || !thumbY.current || !thumbX.current)
+            return;
+        const { clientHeight, scrollHeight, clientWidth, scrollWidth } = containerRef.current;
+        if (isDraggingY.current) {
+            const maxScroll = scrollHeight - clientHeight;
+            const maxThumbMove = clientHeight - thumbHeight.current;
+            const deltaY = e.clientY - dragStartY.current;
+            const newScrollTop = Math.min(Math.max(scrollStartY.current + (deltaY / maxThumbMove) * maxScroll, 0), maxScroll);
+            containerRef.current.scrollTop = newScrollTop;
+        }
+        if (isDraggingX.current) {
+            const maxScrollX = scrollWidth - clientWidth;
+            const maxThumbMoveX = clientWidth - thumbWidth.current;
+            const deltaX = e.clientX - dragStartX.current;
+            const newScrollLeft = Math.min(Math.max(scrollStartX.current + (deltaX / maxThumbMoveX) * maxScrollX, 0), maxScrollX);
+            containerRef.current.scrollLeft = newScrollLeft;
+        }
+    }, []);
+    const handleDragEnd = () => {
+        isDraggingY.current = false;
+        isDraggingX.current = false;
+        document.body.style.userSelect = "";
+        if (rootRef.current)
+            rootRef.current?.classList.remove(`--scrolling`);
+    };
+    const scrollToTop = () => containerRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+    const scrollToBottom = () => containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: "smooth" });
+    const scrollToLeft = () => containerRef.current?.scrollTo({ left: 0, behavior: "smooth" });
+    const scrollToRight = () => containerRef.current?.scrollTo({ left: containerRef.current.scrollWidth, behavior: "smooth" });
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleWheel = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!containerRef.current)
+                return;
+            // Adjust scrollTop manually based on deltaY
+            const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = containerRef.current;
+            if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+                const maxScrollY = scrollHeight - clientHeight;
+                let newScrollTop = scrollTop + e.deltaY;
+                newScrollTop = Math.max(0, Math.min(newScrollTop, maxScrollY));
+                containerRef.current.scrollTop = newScrollTop;
+            }
+            if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+                const maxScrollX = scrollWidth - clientWidth;
+                let newScrollLeft = scrollLeft + e.deltaX;
+                newScrollLeft = Math.max(0, Math.min(newScrollLeft, maxScrollX));
+                containerRef.current.scrollLeft = newScrollLeft;
+            }
+            const scrollPercentY = (containerRef.current.scrollTop / (containerRef.current.scrollHeight - clientHeight)) * 100;
+            const scrollPercentX = (containerRef.current.scrollLeft / (containerRef.current.scrollWidth - clientWidth)) * 100;
+            postScroll(scrollPercentY);
+            postScroll(scrollPercentX);
+        };
+        window.addEventListener("resize", updateThumb);
+        container.addEventListener("scroll", handleScroll);
+        // Prevent blocking default scrolling (fixes touchpad scrolling)
+        container.addEventListener("wheel", handleWheel, { passive: false });
+        document.addEventListener("mousemove", handleDragMove);
+        document.addEventListener("mouseup", handleDragEnd);
+        updateThumb();
+        return () => {
+            window.removeEventListener("resize", updateThumb);
+            window.removeEventListener("wheel", handleWheel);
+            container.removeEventListener("scroll", handleScroll);
+            document.removeEventListener("mousemove", handleDragMove);
+            document.removeEventListener("mouseup", handleDragEnd);
+        };
+    }, [handleScroll, handleDragMove, updateThumb]);
+    useMutationObserver(containerRef.current, updateThumb);
+    return {
+        rootRef, containerRef, thumbY, thumbX,
+        scrollToTop, scrollToBottom, scrollToLeft, scrollToRight,
+        onScrollY, onScrollX
+    };
+};
+export default useScrollbar;

package/dist/esm/hooks/useSheet.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from "react";
 const useSheet = (sheet) => {
     const show = (e) => {

package/dist/esm/hooks/useShortcuts.d.ts

@@ -0,0 +1,7 @@
+import { KeyCode } from "../types/enums";
+export type Shortcut = {
+    keys: KeyCode[];
+    callback: (event: KeyboardEvent) => void;
+};
+declare const useShortcuts: (shortcuts: Shortcut[], preventDefault?: boolean) => void;
+export default useShortcuts;

package/dist/esm/hooks/useShortcuts.js

@@ -0,0 +1,29 @@
+"use client";
+import { useEffect } from "react";
+import { KeyCode } from "../types/enums";
+const useShortcuts = (shortcuts, preventDefault) => {
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            const pressedKeys = [];
+            if (event.ctrlKey)
+                pressedKeys.push(KeyCode.Ctrl);
+            if (event.shiftKey)
+                pressedKeys.push(KeyCode.Shift);
+            if (event.altKey)
+                pressedKeys.push(KeyCode.Alt);
+            if (event.metaKey)
+                pressedKeys.push(KeyCode.PauseBreak); // Meta key (Cmd on Mac)
+            pressedKeys.push(event.keyCode); // Convert event key to KeyCode enum
+            shortcuts.forEach(({ keys, callback }) => {
+                if (keys.every(key => pressedKeys.includes(key))) {
+                    if (preventDefault ?? true)
+                        event.preventDefault();
+                    callback(event);
+                }
+            });
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [shortcuts, preventDefault]);
+};
+export default useShortcuts;

package/dist/esm/hooks/useSlider.d.ts

@@ -0,0 +1,7 @@
+declare const useSlider: () => {
+    push: (key: string) => void;
+    goBack: () => void;
+    prevKey: string | null;
+    direction: "left" | "right";
+};
+export default useSlider;

package/dist/esm/hooks/useSlider.js

@@ -0,0 +1,23 @@
+"use client";
+import { useState } from "react";
+import { useViewTransition } from "..";
+const useSlider = () => {
+    const [history, setHistory] = useState(["root"]);
+    const [prevKey, setPrevKey] = useState(null);
+    const [direction, setDirection] = useState("left");
+    const startTransition = useViewTransition();
+    const push = (key) => {
+        setDirection("left");
+        setPrevKey(history[history.length - 1]);
+        startTransition(() => setHistory((prev) => [...prev, key]));
+    };
+    const goBack = () => {
+        if (history.length <= 1)
+            return;
+        setDirection("right");
+        setPrevKey(history[history.length - 1]);
+        startTransition(() => setHistory((prev) => prev.slice(0, -1)));
+    };
+    return { push, goBack, prevKey, direction };
+};
+export default useSlider;

package/dist/esm/hooks/useTruncateText.d.ts

@@ -0,0 +1,2 @@
+declare const useTruncateText: (lines: number) => import("react").RefObject<HTMLDivElement | null>;
+export default useTruncateText;

package/dist/esm/hooks/useTruncateText.js

@@ -0,0 +1,17 @@
+"use client";
+import { useEffect, useRef } from "react";
+const useTruncateText = (lines) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        const el = ref.current;
+        const lineHeight = parseFloat(getComputedStyle(el).lineHeight);
+        const maxHeight = lineHeight * lines;
+        while (el.scrollHeight > maxHeight) {
+            el.textContent = el.textContent?.trim().slice(0, -1) + "…";
+        }
+    }, [lines]);
+    return ref;
+};
+export default useTruncateText;

package/dist/esm/hooks/useViewTransition.d.ts

@@ -0,0 +1,2 @@
+declare const useViewTransition: () => (callback: () => void) => void;
+export default useViewTransition;

package/dist/esm/hooks/useViewTransition.js

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+const useViewTransition = () => {
+    const startTransition = useCallback((callback) => {
+        if (document.startViewTransition) {
+            document.startViewTransition(callback);
+        }
+        else {
+            callback(); // Fallback for browsers without View Transitions
+        }
+    }, []);
+    return startTransition;
+};
+export default useViewTransition;

package/dist/esm/hooks/useWebSocket.d.ts

@@ -0,0 +1,15 @@
+import { dynamicObject } from "..";
+export type WebSocketOptions = {
+    onOpen?: (event: Event) => void;
+    onClose?: (event: CloseEvent) => void;
+    onRawMessage?: (event: MessageEvent) => void;
+    onMessage?: (data: dynamicObject) => void;
+    onError?: (event: Event) => void;
+    reconnect?: boolean;
+};
+declare const useWebSocket: (url: string, options?: WebSocketOptions) => {
+    isConnected: boolean;
+    messages: any[];
+    sendMessage: (message: string | object) => void;
+};
+export default useWebSocket;

package/dist/esm/hooks/useWebSocket.js

@@ -0,0 +1,87 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+const socketInstances = new Map();
+const listenersMap = new Map();
+const reconnectIntervals = new Map(); // Store dynamic reconnect intervals
+const useWebSocket = (url, options) => {
+    const { onOpen, onClose, onRawMessage, onMessage, onError, reconnect = true } = options || {};
+    const [isConnected, setIsConnected] = useState(false);
+    const [messages, setMessages] = useState([]);
+    const getReconnectInterval = (url) => reconnectIntervals.get(url) ?? 2;
+    const increaseReconnectInterval = (url) => {
+        const current = getReconnectInterval(url);
+        const next = Math.min(current * 2, 60); // Double each time, max 60s
+        reconnectIntervals.set(url, next);
+        return next * 1000;
+    };
+    const resetReconnectInterval = (url) => {
+        reconnectIntervals.set(url, 2); // Reset to 1s on successful reconnect
+    };
+    const connect = useCallback(() => {
+        if (socketInstances.has(url))
+            return; // Prevent duplicate connection
+        const socket = new WebSocket(url);
+        socketInstances.set(url, socket);
+        listenersMap.set(url, []);
+        socket.onopen = (event) => {
+            setIsConnected(true);
+            resetReconnectInterval(url);
+            onOpen?.(event);
+        };
+        socket.onmessage = (event) => {
+            setMessages((prev) => [...prev, event.data]);
+            onRawMessage?.(event);
+            const raw = JSON.parse(Buffer.isBuffer(event) ? event.toString(`utf8`) : `string` == typeof event ? event : event.data);
+            onMessage?.(raw);
+            listenersMap.get(url)?.forEach((listener) => listener(event));
+        };
+        socket.onerror = (event) => {
+            onError?.(event);
+        };
+        socket.onclose = (event) => {
+            setIsConnected(false);
+            onClose?.(event);
+            socketInstances.delete(url);
+            listenersMap.delete(url);
+            if (reconnect && event.code !== 1000) { // 1000 = normal close
+                const delay = increaseReconnectInterval(url);
+                console.log(`Reconnecting in ${delay / 1000} seconds...`);
+                setTimeout(() => {
+                    if (!socketInstances.has(url))
+                        connect(); // Ensure only one instance reconnects
+                }, delay);
+            }
+        };
+    }, [url, onOpen, onClose, onMessage, onError, reconnect]);
+    useEffect(() => {
+        connect();
+        return () => {
+            if (listenersMap.get(url)?.length === 0) {
+                socketInstances.get(url)?.close();
+                socketInstances.delete(url);
+                listenersMap.delete(url);
+                reconnectIntervals.delete(url);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        const messageListener = (event) => setMessages((prev) => [...prev, event.data]);
+        listenersMap.get(url)?.push(messageListener);
+        return () => {
+            const listeners = listenersMap.get(url) || [];
+            listenersMap.set(url, listeners.filter((listener) => listener !== messageListener));
+        };
+    }, [url]);
+    const sendMessage = useCallback((message) => {
+        const socket = socketInstances.get(url);
+        if (socket && socket.readyState === WebSocket.OPEN) {
+            const data = typeof message === "string" ? message : JSON.stringify(message);
+            socket.send(data);
+        }
+        else {
+            console.warn("WebSocket is not connected.");
+        }
+    }, [url]);
+    return { isConnected, messages, sendMessage };
+};
+export default useWebSocket;