Fix component bugs across hooks, elements, form, layout, editors and utils

- Hooks: per-instance timers in useReady; cleanup for useIntersectionObserver;
  useWebSocket no longer reconnects after unmount/refresh, drains the queue
  and dispatches non-JSON messages
- Modal/Popover/Dropdown: onClose only on close, Escape to close, no stray
  DOM props, hooks before early return, scrollbar-aware positioning,
  top-left/top-right dropdown positions
- Elements: Toast/Search/StarRating per-instance timers, Pagination labels
  and empty state, Breadcrumbs titles, LinkList dividers/props, segment-wise
  active-link matching (new utils/link-matches-path), Table object cells
- Form: Select with a default option is changeable, Input clear notifies
  controlled parents and copy works on textareas, Checkbox random label,
  NumberInputButtons runaway interval, upload prop/spread fixes
- Layout: Button disabled while loading, Stack gap and Span truncate via
  inline styles, Img fallbackImageSrc, className/JSDoc fixes
- Editors/MDX/AI: TinyMCE id/cleanup/stale handler/duplicate scripts,
  AceEditor debounce, markdown heights and frontmatter regex, last
  assistant message, AIPromptBlock prompt ref
- Utils: fetchApi headers/FormData/fetchOptions/no mutation, base64 file
  names and read errors, slugify underscore trim, serializeQuery zero values
- Tests for fetchApi, link matching, slugify and serializeQuery
- AGENTS.md updated for the package layout

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/hooks/useCustomEventDispatch.tsx

@@ -31,7 +31,7 @@ export default function useCustomEventDispatch<
         });
 
         window.dispatchEvent(event);
-    }, []);
+    }, [name]);
 
     return { dispatchCustomEvent };
 }

src/hooks/useCustomEventListener.tsx

@@ -33,7 +33,7 @@ export default function useCustomEventListener<
         return function () {
             window.removeEventListener(name, dataEventListenerCallback);
         };
-    }, []);
+    }, [name]);
 
     return { data, message };
 }

src/hooks/useIntersectionObserver.tsx

@@ -53,12 +53,10 @@ export default function useIntersectionObserver({
             : null;
 
         if (!element && !className && refresh < 5) {
-            requestAnimationFrame(() => {
-                setTimeout(() => {
-                    setRefresh(refresh + 1);
-                }, 2000);
-            });
-            return;
+            const retryTimeout = setTimeout(() => {
+                setRefresh(refresh + 1);
+            }, 2000);
+            return () => window.clearTimeout(retryTimeout);
         }
 
         const observer = new IntersectionObserver(observerCallback, {
@@ -73,6 +71,11 @@ export default function useIntersectionObserver({
         } else if (element) {
             observer.observe(element);
         }
+
+        return () => {
+            observer.disconnect();
+            window.clearTimeout(timeoutRef.current);
+        };
     }, [refresh]);
 
     return { isIntersecting };

src/hooks/useReady.tsx

@@ -4,24 +4,22 @@ type Params = {
     timeout?: number;
 };
 
-let timeout: any;
-
 export default function useReady(params?: Params) {
     const [ready, setReady] = React.useState(false);
+    const timeoutRef = React.useRef<any>(null);
 
     const finalTimeout = params?.timeout || 300;
 
     React.useEffect(() => {
-        requestAnimationFrame(() => {
-            window.clearTimeout(timeout);
-
-            timeout = setTimeout(() => {
+        const frame = requestAnimationFrame(() => {
+            timeoutRef.current = setTimeout(() => {
                 setReady(true);
             }, finalTimeout);
         });
 
         return function () {
-            window.clearTimeout(timeout);
+            cancelAnimationFrame(frame);
+            window.clearTimeout(timeoutRef.current);
         };
     }, []);
 

src/hooks/useWebSocket.tsx

@@ -78,6 +78,19 @@ export default function useWebSocket<
         []
     );
 
+    /**
+     * # Close a socket without triggering the reconnect logic
+     */
+    const closeSocket = React.useCallback((ws?: WebSocket) => {
+        if (!ws) return;
+        ws.onclose = null;
+        ws.onerror = null;
+        ws.onmessage = null;
+        ws.onopen = null;
+        window.clearInterval(keepAliveInterval.current);
+        ws.close();
+    }, []);
+
     /**
      * # Connect to Websocket
      */
@@ -91,6 +104,7 @@ export default function useWebSocket<
         if (!wsURL) return;
 
         const ws = new WebSocket(wsURL);
+        socketRef.current = ws;
 
         ws.onerror = () => {
             console.log(`Websocket ERROR:`);
@@ -110,12 +124,13 @@ export default function useWebSocket<
             }, keepAliveDurationRef.current);
 
             tries.current = 0;
-            socketRef.current = ws;
             setSocket(ws);
             console.log(`Websocket connected to ${wsURL}`);
         };
 
         ws.onclose = (ev) => {
+            if (socketRef.current !== ws) return;
+
             console.log("Websocket closed!", {
                 code: ev.code,
                 reason: ev.reason,
@@ -150,7 +165,8 @@ export default function useWebSocket<
             window.clearTimeout(reconnectTimeout.current);
             window.clearInterval(keepAliveInterval.current);
             window.clearInterval(refreshInterval.current);
-            socketRef.current?.close();
+            closeSocket(socketRef.current);
+            socketRef.current = undefined;
         };
     }, []);
 
@@ -163,7 +179,9 @@ export default function useWebSocket<
         refreshInterval.current = window.setInterval(() => {
             console.log("Refreshing WebSocket connection...");
             window.clearTimeout(reconnectTimeout.current);
-            socketRef.current?.close();
+            closeSocket(socketRef.current);
+            socketRef.current = undefined;
+            setSocket(undefined);
             tries.current = 0;
             connect();
         }, refreshConnection);
@@ -187,16 +205,17 @@ export default function useWebSocket<
      * Received Message Queue Handler
      */
     const handleReceivedMessageQueue = React.useCallback(() => {
-        try {
+        while (messageQueueRef.current.length) {
             const msg = messageQueueRef.current.shift();
+            if (!msg) continue;
 
-            if (!msg) return;
-
-            const jsonData = JSON.parse(msg);
             dispatchCustomEvent("wsMessageEvent", msg);
-            dispatchCustomEvent("wsDataEvent", jsonData);
-        } catch (error) {
-            console.log("Unable to parse string. Returning string.");
+
+            try {
+                dispatchCustomEvent("wsDataEvent", JSON.parse(msg));
+            } catch (error) {
+                // Non-JSON messages are only dispatched as `wsMessageEvent`
+            }
         }
     }, []);