@zuzjs/ui 0.10.6 → 0.10.7

package/dist/cjs/hooks/useScrollbar.js

@@ -1,212 +0,0 @@
-"use client";
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import { useMutationObserver } from "..";
-const useScrollbar = (speed, breakpoints = {}) => {
-    const rootRef = useRef(null);
-    const containerRef = useRef(null);
-    const thumbY = useRef(null);
-    const thumbX = useRef(null);
-    const SCROLL_SPEED = useMemo(() => speed ?? 1, [speed]); // default to 1x multiplier
-    const isDraggingY = useRef(false);
-    const isDraggingX = useRef(false);
-    const dragStartX = useRef(0);
-    const dragStartY = useRef(0);
-    const scrollStartY = useRef(0);
-    const scrollStartX = useRef(0);
-    // No need for thumbHeight/Width refs if calculating them dynamically
-    // const thumbHeight = useRef(30);
-    // const thumbWidth = useRef(30);
-    // Animation frame ID for batching visual updates
-    const animationFrameId = useRef(null);
-    const updateThumb = useCallback(() => {
-        if (!containerRef.current || !thumbY.current || !thumbX.current)
-            return;
-        const { clientHeight, scrollHeight, scrollTop, clientWidth, scrollWidth, scrollLeft } = containerRef.current;
-        // Y thumb calculations and update
-        const actualThumbMinHeight = 30; // Min thumb size: 30px
-        const thumbSizeY = Math.max((clientHeight / scrollHeight) * clientHeight, actualThumbMinHeight);
-        const maxThumbPosY = clientHeight - thumbSizeY;
-        const thumbPosY = (scrollTop / (scrollHeight - clientHeight)) * maxThumbPosY;
-        thumbY.current.style.height = `${thumbSizeY}px`;
-        // *** KEY CHANGE: Use transform for positioning ***
-        thumbY.current.style.transform = `translateY(${thumbPosY}px)`;
-        thumbY.current.style.willChange = 'transform, height'; // Hint for browser
-        // X thumb calculations and update
-        const actualThumbMinWidth = 30; // Min thumb size: 30px
-        const thumbSizeX = Math.max((clientWidth / scrollWidth) * clientWidth, actualThumbMinWidth);
-        const maxThumbPosX = clientWidth - thumbSizeX;
-        const thumbPosX = (scrollLeft / (scrollWidth - clientWidth)) * maxThumbPosX;
-        thumbX.current.style.width = `${thumbSizeX}px`;
-        // *** KEY CHANGE: Use transform for positioning ***
-        thumbX.current.style.transform = `translateX(${thumbPosX}px)`;
-        thumbX.current.style.willChange = 'transform, width'; // Hint for browser
-        // Handle --no-y and --no-x classes (consider if these are strictly needed on every frame)
-        // These might still cause reflows, but less frequently than 'top'/'left'
-        if (scrollHeight <= clientHeight && rootRef.current) { // Use scrollHeight <= clientHeight for accurate check
-            rootRef.current.classList.add(`--no-y`);
-        }
-        else if (rootRef.current) {
-            rootRef.current.classList.remove(`--no-y`);
-        }
-        if (scrollWidth <= clientWidth && rootRef.current) { // Use scrollWidth <= clientWidth for accurate check
-            rootRef.current.classList.add(`--no-x`);
-        }
-        else if (rootRef.current) {
-            rootRef.current.classList.remove(`--no-x`);
-        }
-    }, []); // Dependencies can be added here if needed, but often not for core calculations
-    // *** NEW: Central function to request a visual update via requestAnimationFrame ***
-    const requestVisualUpdate = useCallback(() => {
-        if (animationFrameId.current) {
-            cancelAnimationFrame(animationFrameId.current);
-        }
-        animationFrameId.current = requestAnimationFrame(() => {
-            updateThumb();
-            // Trigger breakpoints after the visual update for this frame
-            if (containerRef.current) {
-                const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = containerRef.current;
-                const scrollPercentY = (scrollTop / (scrollHeight - clientHeight)) * 100;
-                const scrollPercentX = (scrollLeft / (scrollWidth - clientWidth)) * 100;
-                Object.keys(breakpoints).forEach((key) => {
-                    const breakpoint = parseFloat(key);
-                    if (Math.abs(scrollPercentY - breakpoint) < 1) {
-                        breakpoints[breakpoint]?.();
-                    }
-                    if (Math.abs(scrollPercentX - breakpoint) < 1) { // Assuming breakpoints can be for X too
-                        breakpoints[breakpoint]?.();
-                    }
-                });
-            }
-        });
-    }, [updateThumb, breakpoints]);
-    const handleScroll = useCallback(() => {
-        if (!containerRef.current)
-            return;
-        // *** Call requestVisualUpdate instead of postScroll ***
-        requestVisualUpdate();
-    }, [requestVisualUpdate]);
-    // 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 || (!isDraggingY.current && !isDraggingX.current))
-            return;
-        const { clientHeight, scrollHeight, clientWidth, scrollWidth } = containerRef.current;
-        if (isDraggingY.current) {
-            const maxScroll = scrollHeight - clientHeight;
-            const thumbCurrentHeight = thumbY.current?.clientHeight || 30; // Use actual thumb height
-            const maxThumbMove = clientHeight - thumbCurrentHeight;
-            const deltaY = e.clientY - dragStartY.current;
-            const newScrollTop = Math.min(Math.max(scrollStartY.current + (deltaY / maxThumbMove) * maxScroll, 0), maxScroll);
-            containerRef.current.scrollTop = newScrollTop;
-            // *** No direct updateThumb here, the scroll event listener will trigger requestVisualUpdate ***
-        }
-        if (isDraggingX.current) {
-            const maxScrollX = scrollWidth - clientWidth;
-            const thumbCurrentWidth = thumbX.current?.clientWidth || 30; // Use actual thumb width
-            const maxThumbMoveX = clientWidth - thumbCurrentWidth;
-            const deltaX = e.clientX - dragStartX.current;
-            const newScrollLeft = Math.min(Math.max(scrollStartX.current + (deltaX / maxThumbMoveX) * maxScrollX, 0), maxScrollX);
-            containerRef.current.scrollLeft = newScrollLeft;
-            // *** No direct updateThumb here, the scroll event listener will trigger requestVisualUpdate ***
-        }
-    }, []); // No dependencies needed if current values are always fresh
-    const handleDragEnd = () => {
-        isDraggingY.current = false;
-        isDraggingX.current = false;
-        document.body.style.userSelect = "";
-        if (rootRef.current)
-            rootRef.current?.classList.remove(`--scrolling`);
-        if (animationFrameId.current) {
-            cancelAnimationFrame(animationFrameId.current); // Clear any pending rAF
-        }
-    };
-    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) => {
-            // *** Passive listener means preventDefault is often not needed/effective here ***
-            // e.preventDefault();
-            // e.stopPropagation();
-            if (!containerRef.current)
-                return;
-            const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } = containerRef.current;
-            let newScrollTop = scrollTop;
-            let newScrollLeft = scrollLeft;
-            let changed = false;
-            if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
-                const maxScrollY = scrollHeight - clientHeight;
-                newScrollTop = scrollTop + e.deltaY * SCROLL_SPEED;
-                newScrollTop = Math.max(0, Math.min(newScrollTop, maxScrollY));
-                if (newScrollTop !== scrollTop) {
-                    containerRef.current.scrollTop = newScrollTop;
-                    changed = true;
-                }
-            }
-            else { // Prefer deltaX if it's larger or if deltaY is 0
-                const maxScrollX = scrollWidth - clientWidth;
-                newScrollLeft = scrollLeft + e.deltaX * SCROLL_SPEED;
-                newScrollLeft = Math.max(0, Math.min(newScrollLeft, maxScrollX));
-                if (newScrollLeft !== scrollLeft) {
-                    containerRef.current.scrollLeft = newScrollLeft;
-                    changed = true;
-                }
-            }
-            // *** Only request update if scroll position actually changed ***
-            if (changed) {
-                requestVisualUpdate();
-            }
-        };
-        window.addEventListener("resize", requestVisualUpdate); // Use requestVisualUpdate for resize
-        container.addEventListener("scroll", handleScroll, { passive: true }); // Make scroll passive if you don't preventDefault
-        container.addEventListener("wheel", handleWheel, { passive: true }); // Keep passive for wheel
-        document.addEventListener("mousemove", handleDragMove);
-        document.addEventListener("mouseup", handleDragEnd);
-        // Initial update
-        requestVisualUpdate(); // Use requestVisualUpdate for initial render
-        return () => {
-            window.removeEventListener("resize", requestVisualUpdate);
-            container.removeEventListener("scroll", handleScroll);
-            container.removeEventListener("wheel", handleWheel); // Corrected: remove from container
-            document.removeEventListener("mousemove", handleDragMove);
-            document.removeEventListener("mouseup", handleDragEnd);
-            if (animationFrameId.current) {
-                cancelAnimationFrame(animationFrameId.current); // Clean up any pending rAF
-            }
-        };
-    }, [handleScroll, handleDragMove, requestVisualUpdate, SCROLL_SPEED]); // Added SCROLL_SPEED to deps
-    // *** NEW: Hook useMutationObserver to call requestVisualUpdate ***
-    useMutationObserver(containerRef.current, requestVisualUpdate);
-    return {
-        rootRef,
-        containerRef,
-        thumbY,
-        thumbX,
-        scrollToTop,
-        scrollToBottom,
-        scrollToLeft,
-        scrollToRight,
-        onScrollY,
-        onScrollX,
-    };
-};
-export default useScrollbar;

package/dist/cjs/hooks/useSheet.d.ts

@@ -1,7 +0,0 @@
-import { MouseEvent, RefObject } from "react";
-import { SheetHandler } from "../comps";
-declare const useSheet: (sheet: RefObject<SheetHandler | null>) => {
-    show: (e: MouseEvent<Element, MouseEvent> | TouchEvent) => void;
-    hide: (e: MouseEvent | TouchEvent) => void;
-};
-export default useSheet;

package/dist/cjs/hooks/useSheet.js

@@ -1,22 +0,0 @@
-"use client";
-import { useEffect } from "react";
-const useSheet = (sheet) => {
-    const show = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setTimeout(() => {
-            sheet.current?.show(e);
-        }, 0);
-    };
-    const hide = (e) => {
-        sheet.current?.hide();
-    };
-    useEffect(() => {
-        document.addEventListener("click", hide);
-        return () => {
-            document.removeEventListener("click", hide);
-        };
-    }, [sheet]);
-    return { show, hide };
-};
-export default useSheet;

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

@@ -1,7 +0,0 @@
-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/cjs/hooks/useShortcuts.js

@@ -1,29 +0,0 @@
-"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/cjs/hooks/useSlider.d.ts

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

package/dist/cjs/hooks/useSlider.js

@@ -1,23 +0,0 @@
-"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/cjs/hooks/useToast.d.ts

@@ -1,10 +0,0 @@
-declare const useToast: () => {
-    show: (title: string, message?: string, icon?: string, duration?: number) => number;
-    hide: (id: number) => void;
-    success: (title: string, message?: string, icon?: string, duration?: number) => number;
-    error: (title: string, message?: string, icon?: string, duration?: number) => number;
-    warn: (title: string, message?: string, icon?: string, duration?: number) => number;
-    promise: (title: string, message?: string, icon?: string, duration?: number) => number;
-    clearAll: () => void;
-};
-export default useToast;

package/dist/cjs/hooks/useToast.js

@@ -1,19 +0,0 @@
-"use client";
-import { useContext } from "react";
-import { ToastContext } from "../comps/Toast";
-import { ToastType } from "../comps/Toast/types";
-const useToast = () => {
-    const ctx = useContext(ToastContext);
-    if (!ctx)
-        throw new Error('useToast must be used inside <ToastProvider>');
-    const base = (type, data) => ctx.add({ ...data, type });
-    const clearAll = () => ctx.clear();
-    const hide = (id) => ctx.remove(id);
-    const show = (title, message, icon, duration) => base(ToastType.Default, { title, message, icon, duration });
-    const success = (title, message, icon, duration) => base(ToastType.Success, { title, message, icon, duration });
-    const error = (title, message, icon, duration) => base(ToastType.Error, { title, message, icon, duration });
-    const warn = (title, message, icon, duration) => base(ToastType.Warn, { title, message, icon, duration });
-    const promise = (title, message, icon, duration) => base(ToastType.Promise, { title, message, icon, duration });
-    return { show, hide, success, error, warn, promise, clearAll };
-};
-export default useToast;

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

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

package/dist/cjs/hooks/useTruncateText.js

@@ -1,17 +0,0 @@
-"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/cjs/hooks/useUploader.d.ts

@@ -1,50 +0,0 @@
-import { CancelTokenSource } from "@zuzjs/core";
-import { dynamic } from "..";
-export declare enum Status {
-    Error = -1,
-    Idle = 0,
-    FetchingServer = 1,
-    Uploading = 2,
-    Saving = 3,
-    Saved = 4
-}
-export interface QueItem {
-    ID: string;
-    file: File;
-    dir: string;
-    remote: false;
-    progress: number;
-    speed: number;
-    eta: number;
-    bytes: number;
-    status: Status;
-    server?: Server | null;
-}
-export type Server = {
-    ID: string;
-    uri: string;
-    token: string;
-    rmf: string | null;
-};
-export type Uploadify = {
-    que: QueItem[];
-    index: number;
-    speed: number;
-    stamp: number | null;
-    token: string | null;
-    status: Status;
-    cancelToken?: CancelTokenSource | null;
-};
-export interface Uploader {
-    apiUrl: string;
-    onChange?: (file: QueItem | null) => void;
-    onComplete?: (index: number, que: QueItem[], currentFile: QueItem | null) => void;
-    onError?: (index: number, que: QueItem[], currentFile: QueItem | null) => void;
-    onQueFinished?: () => void;
-}
-declare const useUploader: (conf: Uploader) => {
-    get: () => import("react").RefObject<Uploadify>;
-    getQue: () => QueItem[];
-    addToQue: (f: dynamic) => void;
-};
-export default useUploader;

package/dist/cjs/hooks/useUploader.js

@@ -1,112 +0,0 @@
-"use client";
-import { getCancelToken, withPost } from "@zuzjs/core";
-import { useRef } from "react";
-import { uuid } from "..";
-export var Status;
-(function (Status) {
-    Status[Status["Error"] = -1] = "Error";
-    Status[Status["Idle"] = 0] = "Idle";
-    Status[Status["FetchingServer"] = 1] = "FetchingServer";
-    Status[Status["Uploading"] = 2] = "Uploading";
-    Status[Status["Saving"] = 3] = "Saving";
-    Status[Status["Saved"] = 4] = "Saved";
-})(Status || (Status = {}));
-const useUploader = (conf) => {
-    const { apiUrl, onChange, onQueFinished } = conf;
-    const self = useRef({
-        que: [],
-        index: -1,
-        speed: 0,
-        stamp: null,
-        token: null,
-        status: Status.Idle
-    });
-    const sync = () => onChange?.(currentFile());
-    const importFile = () => { };
-    const uploadFile = () => {
-        self.current.stamp = Date.now();
-        const file = currentFile();
-        const formData = new FormData();
-        formData.append("ID", file.ID);
-        formData.append("dir", file.dir);
-        formData.append("server", file.server.ID);
-        formData.append("token", file.server.token);
-        formData.append('file', file.file);
-        formData.append('fs', file.file.size.toString());
-        self.current.cancelToken = getCancelToken();
-        withPost(`${self.current.que[self.current.index].server.uri}/receive`, formData, 86400, true, undefined, (ev) => {
-            self.current.que[self.current.index].status = Status.Uploading;
-            onChange?.({ ...currentFile(), progress: (ev.progress || 0) });
-        })
-            .then(resp => {
-            // console.log(`Uploaded`, resp)
-            self.current.que[self.current.index].progress = 1;
-            self.current.que[self.current.index].status = Status.Saved;
-            self.current.status = Status.Idle;
-            sync();
-            Que();
-        })
-            .catch(err => {
-            // console.error(`UploadFailed`, err)
-            self.current.que[self.current.index].status = Status.Error;
-            self.current.status = Status.Idle;
-            sync();
-            Que();
-        });
-    };
-    const getServer = (force) => {
-        self.current.que[self.current.index].status = Status.FetchingServer;
-        sync();
-        withPost(`${apiUrl}get_server`, { size: currentFile().file.size })
-            .then((resp) => {
-            self.current.que[self.current.index].server = resp.server;
-            self.current.que[self.current.index].status = Status.Uploading;
-            sync();
-            uploadFile();
-        })
-            .catch((err) => {
-            self.current.que[self.current.index].status = Status.Error;
-            self.current.status = Status.Idle;
-            sync();
-            Que();
-        });
-    };
-    const currentFile = () => self.current.que[self.current.index];
-    const getQue = () => self.current.que;
-    const Que = () => {
-        if (self.current.status == Status.Idle &&
-            (self.current.que.length - 1) > self.current.index) {
-            self.current.status = Status.Uploading;
-            self.current.index++;
-            self.current.que[self.current.index].status = Status.Uploading;
-            sync();
-            if (self.current.que[self.current.index].remote)
-                importFile();
-            else
-                getServer(true);
-        }
-        else
-            onQueFinished?.();
-    };
-    const addToQue = (f) => {
-        self.current.que.push({
-            ID: uuid(),
-            file: f.file,
-            dir: f.dir,
-            remote: f.remote,
-            progress: 0,
-            speed: 0,
-            eta: 0,
-            bytes: 0,
-            status: Status.Idle,
-            server: null
-        });
-        Que();
-    };
-    return {
-        get: () => self,
-        getQue,
-        addToQue,
-    };
-};
-export default useUploader;

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

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

package/dist/cjs/hooks/useViewTransition.js

@@ -1,13 +0,0 @@
-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/cjs/hooks/useWebSocket.d.ts

@@ -1,15 +0,0 @@
-import { dynamic } from "..";
-export type WebSocketOptions = {
-    onOpen?: (event: Event) => void;
-    onClose?: (event: CloseEvent) => void;
-    onRawMessage?: (event: MessageEvent) => void;
-    onMessage?: (data: dynamic) => 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/cjs/hooks/useWebSocket.js

@@ -1,98 +0,0 @@
-"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)) {
-            const Socket = socketInstances.get(url);
-            if (Socket) {
-                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));
-                };
-            }
-            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.log("WebSocket is not connected.");
-        }
-    }, [url]);
-    return { isConnected, messages, sendMessage };
-};
-export default useWebSocket;