airyhooks 0.2.0 → 0.3.1

package/dist/utils/hook-templates.js

@@ -0,0 +1,4521 @@
+// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+// Generated by: pnpm --filter @airyhooks/hooks build:templates
+// Source: packages/hooks/src/*/use*.ts
+export const templates = {
+    useBoolean: `import { useCallback, useState } from "react";
+
+/**
+ * Boolean state with setTrue, setFalse, and toggle handlers.
+ *
+ * @param initialValue - Initial boolean value (default: false)
+ * @returns Tuple of [value, { setTrue, setFalse, toggle }]
+ *
+ * @example
+ * const [isEnabled, handlers] = useBoolean(false);
+ *
+ * return (
+ *   <>
+ *     <button onClick={handlers.toggle}>Toggle</button>
+ *     <button onClick={handlers.setTrue}>Enable</button>
+ *     <button onClick={handlers.setFalse}>Disable</button>
+ *   </>
+ * );
+ */
+export function useBoolean(initialValue = false): [
+  boolean,
+  {
+    setFalse: () => void;
+    setTrue: () => void;
+    toggle: () => void;
+  },
+] {
+  const [value, setValue] = useState(initialValue);
+
+  const toggle = useCallback(() => {
+    setValue((prev) => !prev);
+  }, []);
+
+  const setTrue = useCallback(() => {
+    setValue(true);
+  }, []);
+
+  const setFalse = useCallback(() => {
+    setValue(false);
+  }, []);
+
+  return [
+    value,
+    {
+      setFalse,
+      setTrue,
+      toggle,
+    },
+  ];
+}
+`, useBoolean_test: `import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { useBoolean } from "./useBoolean.js";
+
+describe("useBoolean", () => {
+  it("should initialize with false by default", () => {
+    const { result } = renderHook(() => useBoolean());
+    expect(result.current[0]).toBe(false);
+  });
+
+  it("should initialize with provided value", () => {
+    const { result } = renderHook(() => useBoolean(true));
+    expect(result.current[0]).toBe(true);
+  });
+
+  it("should have setTrue handler", () => {
+    const { result } = renderHook(() => useBoolean());
+
+    act(() => {
+      result.current[1].setTrue();
+    });
+    expect(result.current[0]).toBe(true);
+  });
+
+  it("should have setFalse handler", () => {
+    const { result } = renderHook(() => useBoolean(true));
+
+    act(() => {
+      result.current[1].setFalse();
+    });
+    expect(result.current[0]).toBe(false);
+  });
+
+  it("should have toggle handler", () => {
+    const { result } = renderHook(() => useBoolean());
+
+    act(() => {
+      result.current[1].toggle();
+    });
+    expect(result.current[0]).toBe(true);
+
+    act(() => {
+      result.current[1].toggle();
+    });
+    expect(result.current[0]).toBe(false);
+  });
+
+  it("should maintain stable handler references", () => {
+    const { rerender, result } = renderHook(() => useBoolean());
+
+    const handlers1 = result.current[1];
+    rerender();
+    const handlers2 = result.current[1];
+
+    expect(handlers1.toggle).toBe(handlers2.toggle);
+    expect(handlers1.setTrue).toBe(handlers2.setTrue);
+    expect(handlers1.setFalse).toBe(handlers2.setFalse);
+  });
+});
+`,
+    useClickAway: `import { useEffect } from "react";
+
+/**
+ * Detects clicks outside of a target element.
+ *
+ * @param ref - React ref to the target element
+ * @param callback - Function to call when click outside is detected
+ *
+ * @example
+ * const ref = useRef<HTMLDivElement>(null);
+ *
+ * useClickAway(ref, () => {
+ *   setIsOpen(false);
+ * });
+ *
+ * return <div ref={ref}>Content</div>;
+ */
+export function useClickAway<T extends HTMLElement>(
+  ref: React.RefObject<null | T>,
+  callback: () => void,
+): void {
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const element = ref.current;
+      if (element && !element.contains(event.target as Node)) {
+        callback();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref, callback]);
+}
+`, useClickAway_test: `import { cleanup, fireEvent, render } from "@testing-library/react";
+import React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { useClickAway } from "./useClickAway.js";
+
+describe("useClickAway", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should call callback when clicking outside element", () => {
+    const callback = vi.fn();
+    const Component = () => {
+      const ref = React.useRef<HTMLDivElement>(null);
+      useClickAway(ref, callback);
+
+      return (
+        <div>
+          <div data-testid="target" ref={ref}>
+            Target
+          </div>
+          <div data-testid="outside">Outside</div>
+        </div>
+      );
+    };
+
+    const { getByTestId } = render(<Component />);
+
+    fireEvent.mouseDown(getByTestId("outside"));
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not call callback when clicking inside element", () => {
+    const callback = vi.fn();
+    const Component = () => {
+      const ref = React.useRef<HTMLDivElement>(null);
+      useClickAway(ref, callback);
+
+      return (
+        <div data-testid="target" ref={ref}>
+          Target
+        </div>
+      );
+    };
+
+    const { getByTestId } = render(<Component />);
+
+    fireEvent.mouseDown(getByTestId("target"));
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("should cleanup listener on unmount", () => {
+    const callback = vi.fn();
+    const removeSpy = vi.spyOn(document, "removeEventListener");
+
+    const Component = () => {
+      const ref = React.useRef<HTMLDivElement>(null);
+      useClickAway(ref, callback);
+      return <div ref={ref} />;
+    };
+
+    const { unmount } = render(<Component />);
+    unmount();
+
+    expect(removeSpy).toHaveBeenCalledWith("mousedown", expect.any(Function));
+  });
+});
+`,
+    useCopyToClipboard: `import { useCallback, useState } from "react";
+
+export interface UseCopyToClipboardResult {
+  /** The currently copied text, or null if nothing has been copied */
+  copiedText: null | string;
+  /** Function to copy text to clipboard. Returns true if successful. */
+  copy: (text: string) => Promise<boolean>;
+  /** Function to reset the copied state */
+  reset: () => void;
+}
+
+/**
+ * Copy text to the clipboard using the modern Clipboard API.
+ *
+ * @returns Object containing copiedText state, copy function, and reset function
+ *
+ * @example
+ * const { copiedText, copy, reset } = useCopyToClipboard();
+ *
+ * return (
+ *   <button onClick={() => copy("Hello, World!")}>
+ *     {copiedText ? "Copied!" : "Copy"}
+ *   </button>
+ * );
+ */
+export function useCopyToClipboard(): UseCopyToClipboardResult {
+  const [copiedText, setCopiedText] = useState<null | string>(null);
+
+  const copy = useCallback(async (text: string): Promise<boolean> => {
+    // Check if we're in a browser environment with clipboard support
+    const clipboard =
+      typeof window !== "undefined" ? navigator.clipboard : undefined;
+
+    if (!clipboard) {
+      console.warn("Clipboard API not available");
+      return false;
+    }
+
+    try {
+      await clipboard.writeText(text);
+      setCopiedText(text);
+      return true;
+    } catch (error) {
+      console.warn("Failed to copy to clipboard:", error);
+      setCopiedText(null);
+      return false;
+    }
+  }, []);
+
+  const reset = useCallback(() => {
+    setCopiedText(null);
+  }, []);
+
+  return { copiedText, copy, reset };
+}
+`, useCopyToClipboard_test: `import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useCopyToClipboard } from "./useCopyToClipboard.js";
+
+describe("useCopyToClipboard", () => {
+  const mockClipboard = {
+    writeText: vi.fn(),
+  };
+
+  beforeEach(() => {
+    Object.assign(navigator, {
+      clipboard: mockClipboard,
+    });
+    mockClipboard.writeText.mockResolvedValue(undefined);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should return initial state with null copiedText", () => {
+    const { result } = renderHook(() => useCopyToClipboard());
+
+    expect(result.current.copiedText).toBeNull();
+    expect(typeof result.current.copy).toBe("function");
+    expect(typeof result.current.reset).toBe("function");
+  });
+
+  it("should copy text to clipboard and update state", async () => {
+    const { result } = renderHook(() => useCopyToClipboard());
+
+    await act(async () => {
+      const success = await result.current.copy("Hello, World!");
+      expect(success).toBe(true);
+    });
+
+    expect(mockClipboard.writeText).toHaveBeenCalledWith("Hello, World!");
+    expect(result.current.copiedText).toBe("Hello, World!");
+  });
+
+  it("should reset copiedText state", async () => {
+    const { result } = renderHook(() => useCopyToClipboard());
+
+    await act(async () => {
+      await result.current.copy("Test");
+    });
+    expect(result.current.copiedText).toBe("Test");
+
+    act(() => {
+      result.current.reset();
+    });
+    expect(result.current.copiedText).toBeNull();
+  });
+
+  it("should return false when clipboard API fails", async () => {
+    mockClipboard.writeText.mockRejectedValueOnce(new Error("Failed"));
+    const consoleSpy = vi.spyOn(console, "warn").mockImplementation(vi.fn());
+
+    const { result } = renderHook(() => useCopyToClipboard());
+
+    await act(async () => {
+      const success = await result.current.copy("Test");
+      expect(success).toBe(false);
+    });
+
+    expect(result.current.copiedText).toBeNull();
+    consoleSpy.mockRestore();
+  });
+
+  it("should return false when clipboard API is not available", async () => {
+    Object.assign(navigator, { clipboard: undefined });
+    const consoleSpy = vi.spyOn(console, "warn").mockImplementation(vi.fn());
+
+    const { result } = renderHook(() => useCopyToClipboard());
+
+    await act(async () => {
+      const success = await result.current.copy("Test");
+      expect(success).toBe(false);
+    });
+
+    consoleSpy.mockRestore();
+  });
+
+  it("should update copiedText on subsequent copies", async () => {
+    const { result } = renderHook(() => useCopyToClipboard());
+
+    await act(async () => {
+      await result.current.copy("First");
+    });
+    expect(result.current.copiedText).toBe("First");
+
+    await act(async () => {
+      await result.current.copy("Second");
+    });
+    expect(result.current.copiedText).toBe("Second");
+  });
+});
+`,
+    useCounter: `import { useCallback, useState } from "react";
+
+/**
+ * Manages numeric state with increment, decrement, reset, and set methods.
+ *
+ * @param initialValue - Initial numeric value (default: 0)
+ * @returns Tuple of [value, { increment, decrement, reset, set }]
+ *
+ * @example
+ * const [count, { increment, decrement, reset }] = useCounter(0);
+ *
+ * return (
+ *   <>
+ *     <p>Count: {count}</p>
+ *     <button onClick={() => increment()}>+1</button>
+ *     <button onClick={() => decrement()}>-1</button>
+ *     <button onClick={() => increment(5)}>+5</button>
+ *     <button onClick={() => reset()}>Reset</button>
+ *   </>
+ * );
+ */
+export function useCounter(initialValue = 0): [
+  number,
+  {
+    decrement: (amount?: number) => void;
+    increment: (amount?: number) => void;
+    reset: () => void;
+    set: (value: ((prev: number) => number) | number) => void;
+  },
+] {
+  const [count, setCount] = useState<number>(initialValue);
+
+  const increment = useCallback((amount = 1) => {
+    setCount((prev) => prev + amount);
+  }, []);
+
+  const decrement = useCallback((amount = 1) => {
+    setCount((prev) => prev - amount);
+  }, []);
+
+  const reset = useCallback(() => {
+    setCount(initialValue);
+  }, [initialValue]);
+
+  const set = useCallback((value: ((prev: number) => number) | number) => {
+    setCount(value);
+  }, []);
+
+  return [
+    count,
+    {
+      decrement,
+      increment,
+      reset,
+      set,
+    },
+  ];
+}
+`, useCounter_test: `import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { useCounter } from "./useCounter.js";
+
+describe("useCounter", () => {
+  it("should initialize with 0 by default", () => {
+    const { result } = renderHook(() => useCounter());
+    expect(result.current[0]).toBe(0);
+  });
+
+  it("should initialize with provided value", () => {
+    const { result } = renderHook(() => useCounter(10));
+    expect(result.current[0]).toBe(10);
+  });
+
+  it("should increment by 1 by default", () => {
+    const { result } = renderHook(() => useCounter(0));
+
+    act(() => {
+      result.current[1].increment();
+    });
+    expect(result.current[0]).toBe(1);
+  });
+
+  it("should increment by custom amount", () => {
+    const { result } = renderHook(() => useCounter(0));
+
+    act(() => {
+      result.current[1].increment(5);
+    });
+    expect(result.current[0]).toBe(5);
+
+    act(() => {
+      result.current[1].increment(3);
+    });
+    expect(result.current[0]).toBe(8);
+  });
+
+  it("should decrement by 1 by default", () => {
+    const { result } = renderHook(() => useCounter(5));
+
+    act(() => {
+      result.current[1].decrement();
+    });
+    expect(result.current[0]).toBe(4);
+  });
+
+  it("should decrement by custom amount", () => {
+    const { result } = renderHook(() => useCounter(10));
+
+    act(() => {
+      result.current[1].decrement(3);
+    });
+    expect(result.current[0]).toBe(7);
+  });
+
+  it("should reset to initial value", () => {
+    const { result } = renderHook(() => useCounter(5));
+
+    act(() => {
+      result.current[1].increment(10);
+    });
+    expect(result.current[0]).toBe(15);
+
+    act(() => {
+      result.current[1].reset();
+    });
+    expect(result.current[0]).toBe(5);
+  });
+
+  it("should set to specific value", () => {
+    const { result } = renderHook(() => useCounter(0));
+
+    act(() => {
+      result.current[1].set(42);
+    });
+    expect(result.current[0]).toBe(42);
+  });
+
+  it("should set with updater function", () => {
+    const { result } = renderHook(() => useCounter(10));
+
+    act(() => {
+      result.current[1].set((prev) => prev * 2);
+    });
+    expect(result.current[0]).toBe(20);
+  });
+
+  it("should handle negative numbers", () => {
+    const { result } = renderHook(() => useCounter(0));
+
+    act(() => {
+      result.current[1].decrement(5);
+    });
+    expect(result.current[0]).toBe(-5);
+  });
+});
+`,
+    useDebounce: `import { useEffect, useState } from "react";
+
+/**
+ * Debounces a value by delaying updates until after the specified delay.
+ *
+ * @param value - The value to debounce
+ * @param delay - The delay in milliseconds (default: 500ms)
+ * @returns The debounced value
+ *
+ * @example
+ * const [search, setSearch] = useState("");
+ * const debouncedSearch = useDebounce(search, 300);
+ *
+ * useEffect(() => {
+ *   // This effect runs 300ms after the user stops typing
+ *   fetchResults(debouncedSearch);
+ * }, [debouncedSearch]);
+ */
+export function useDebounce<T>(value: T, delay = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+`, useDebounce_test: `import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useDebounce } from "./useDebounce.js";
+
+describe("useDebounce", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  it("should return initial value immediately", () => {
+    const { result } = renderHook(() => useDebounce("initial", 500));
+    expect(result.current).toBe("initial");
+  });
+
+  it("should debounce value updates", () => {
+    const { rerender, result } = renderHook(
+      ({ delay, value }) => useDebounce(value, delay),
+      { initialProps: { delay: 500, value: "initial" } },
+    );
+
+    expect(result.current).toBe("initial");
+
+    rerender({ delay: 500, value: "updated" });
+    expect(result.current).toBe("initial");
+
+    act(() => {
+      vi.advanceTimersByTime(499);
+    });
+    expect(result.current).toBe("initial");
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(result.current).toBe("updated");
+  });
+
+  it("should reset timer on rapid value changes", () => {
+    const { rerender, result } = renderHook(
+      ({ value }) => useDebounce(value, 500),
+      { initialProps: { value: "a" } },
+    );
+
+    rerender({ value: "b" });
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    rerender({ value: "c" });
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    expect(result.current).toBe("a");
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+    expect(result.current).toBe("c");
+  });
+
+  it("should use default delay of 500ms", () => {
+    const { rerender, result } = renderHook(({ value }) => useDebounce(value), {
+      initialProps: { value: "initial" },
+    });
+
+    rerender({ value: "updated" });
+
+    act(() => {
+      vi.advanceTimersByTime(499);
+    });
+    expect(result.current).toBe("initial");
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(result.current).toBe("updated");
+  });
+});
+`,
+    useDebouncedCallback: `import { useCallback, useEffect, useRef } from "react";
+
+/**
+ * Creates a debounced version of a callback function.
+ * The callback will only execute after the specified delay has passed
+ * since the last invocation.
+ *
+ * @param callback - The function to debounce
+ * @param delay - The delay in milliseconds (default: 500ms)
+ * @returns A tuple containing [debouncedCallback, cancel]
+ *
+ * @example
+ * const [debouncedSearch, cancel] = useDebouncedCallback((query: string) => {
+ *   fetch(\`/api/search?q=\${query}\`);
+ * }, 300);
+ *
+ * // Call the debounced function
+ * <input onChange={(e) => debouncedSearch(e.target.value)} />
+ *
+ * // Cancel pending calls if needed
+ * <button onClick={cancel}>Cancel</button>
+ */
+export function useDebouncedCallback<T extends unknown[]>(
+  callback: (...args: T) => void,
+  delay = 500,
+): [(...args: T) => void, () => void] {
+  const callbackRef = useRef(callback);
+  const timeoutRef = useRef<null | ReturnType<typeof setTimeout>>(null);
+
+  // Keep callback ref up to date
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const cancel = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  const debouncedCallback = useCallback(
+    (...args: T) => {
+      cancel();
+      timeoutRef.current = setTimeout(() => {
+        callbackRef.current(...args);
+      }, delay);
+    },
+    [delay, cancel],
+  );
+
+  return [debouncedCallback, cancel];
+}
+`, useDebouncedCallback_test: `import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useDebouncedCallback } from "./useDebouncedCallback.js";
+
+describe("useDebouncedCallback", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  it("should debounce callback execution", () => {
+    const callback = vi.fn();
+    const { result } = renderHook(() => useDebouncedCallback(callback, 500));
+
+    const [debouncedCallback] = result.current;
+
+    act(() => {
+      debouncedCallback("a");
+      debouncedCallback("b");
+      debouncedCallback("c");
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith("c");
+  });
+
+  it("should use default delay of 500ms", () => {
+    const callback = vi.fn();
+    const { result } = renderHook(() => useDebouncedCallback(callback));
+
+    const [debouncedCallback] = result.current;
+
+    act(() => {
+      debouncedCallback();
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(499);
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should reset timer on each call", () => {
+    const callback = vi.fn();
+    const { result } = renderHook(() => useDebouncedCallback(callback, 500));
+
+    const [debouncedCallback] = result.current;
+
+    act(() => {
+      debouncedCallback("first");
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    act(() => {
+      debouncedCallback("second");
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith("second");
+  });
+
+  it("should cancel pending callback", () => {
+    const callback = vi.fn();
+    const { result } = renderHook(() => useDebouncedCallback(callback, 500));
+
+    const [debouncedCallback, cancel] = result.current;
+
+    act(() => {
+      debouncedCallback("test");
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(250);
+    });
+
+    act(() => {
+      cancel();
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("should pass all arguments to callback", () => {
+    const callback = vi.fn();
+    const { result } = renderHook(() => useDebouncedCallback(callback, 100));
+
+    const [debouncedCallback] = result.current;
+
+    act(() => {
+      debouncedCallback("arg1", "arg2", 123);
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(callback).toHaveBeenCalledWith("arg1", "arg2", 123);
+  });
+
+  it("should use latest callback reference", () => {
+    const callback1 = vi.fn();
+    const callback2 = vi.fn();
+
+    const { rerender, result } = renderHook(
+      ({ cb }) => useDebouncedCallback(cb, 500),
+      { initialProps: { cb: callback1 } },
+    );
+
+    const [debouncedCallback] = result.current;
+
+    act(() => {
+      debouncedCallback();
+    });
+
+    rerender({ cb: callback2 });
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    expect(callback1).not.toHaveBeenCalled();
+    expect(callback2).toHaveBeenCalledTimes(1);
+  });
+
+  it("should cleanup on unmount", () => {
+    const callback = vi.fn();
+    const { result, unmount } = renderHook(() =>
+      useDebouncedCallback(callback, 500),
+    );
+
+    const [debouncedCallback] = result.current;
+
+    act(() => {
+      debouncedCallback();
+    });
+
+    unmount();
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("should handle delay changes", () => {
+    const callback = vi.fn();
+
+    const { rerender, result } = renderHook(
+      ({ delay }) => useDebouncedCallback(callback, delay),
+      { initialProps: { delay: 500 } },
+    );
+
+    act(() => {
+      result.current[0]("test");
+    });
+
+    rerender({ delay: 100 });
+
+    // Get new debounced callback with updated delay
+    act(() => {
+      result.current[0]("updated");
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith("updated");
+  });
+});
+`,
+    useDocumentTitle: `import { useEffect, useRef } from "react";
+
+/**
+ * Dynamically update the document title.
+ *
+ * @param title - The title to set for the document
+ * @param restoreOnUnmount - Whether to restore the previous title on unmount (default: true)
+ *
+ * @example
+ * // Basic usage
+ * useDocumentTitle('Home | My App');
+ *
+ * @example
+ * // Dynamic title based on state
+ * useDocumentTitle(\`\${unreadCount} new messages\`);
+ *
+ * @example
+ * // Don't restore title on unmount
+ * useDocumentTitle('Dashboard', false);
+ */
+export function useDocumentTitle(title: string, restoreOnUnmount = true): void {
+  const previousTitle = useRef<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+
+    // Store the previous title only on first mount
+    previousTitle.current ??= document.title;
+
+    document.title = title;
+  }, [title]);
+
+  useEffect(() => {
+    return () => {
+      if (restoreOnUnmount && previousTitle.current !== undefined) {
+        document.title = previousTitle.current;
+      }
+    };
+  }, [restoreOnUnmount]);
+}
+`, useDocumentTitle_test: `import { cleanup, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { useDocumentTitle } from "./useDocumentTitle.js";
+
+describe("useDocumentTitle", () => {
+  const originalTitle = "Original Title";
+
+  beforeEach(() => {
+    document.title = originalTitle;
+  });
+
+  afterEach(() => {
+    cleanup();
+    document.title = originalTitle;
+  });
+
+  it("should set the document title", () => {
+    renderHook(() => {
+      useDocumentTitle("New Title");
+    });
+
+    expect(document.title).toBe("New Title");
+  });
+
+  it("should update the document title when title changes", () => {
+    const { rerender } = renderHook(
+      ({ title }) => {
+        useDocumentTitle(title);
+      },
+      {
+        initialProps: { title: "First Title" },
+      },
+    );
+
+    expect(document.title).toBe("First Title");
+
+    rerender({ title: "Second Title" });
+    expect(document.title).toBe("Second Title");
+  });
+
+  it("should restore original title on unmount by default", () => {
+    const { unmount } = renderHook(() => {
+      useDocumentTitle("Temporary Title");
+    });
+
+    expect(document.title).toBe("Temporary Title");
+
+    unmount();
+    expect(document.title).toBe(originalTitle);
+  });
+
+  it("should not restore title on unmount when restoreOnUnmount is false", () => {
+    const { unmount } = renderHook(() => {
+      useDocumentTitle("Permanent Title", false);
+    });
+
+    expect(document.title).toBe("Permanent Title");
+
+    unmount();
+    expect(document.title).toBe("Permanent Title");
+  });
+
+  it("should restore the initial title, not intermediate titles", () => {
+    const { rerender, unmount } = renderHook(
+      ({ title }) => {
+        useDocumentTitle(title);
+      },
+      { initialProps: { title: "First" } },
+    );
+
+    expect(document.title).toBe("First");
+
+    rerender({ title: "Second" });
+    expect(document.title).toBe("Second");
+
+    rerender({ title: "Third" });
+    expect(document.title).toBe("Third");
+
+    unmount();
+    expect(document.title).toBe(originalTitle);
+  });
+});
+`,
+    useEventListener: `import { useEffect, useRef } from "react";
+
+/**
+ * Attaches an event listener to a target element or window with automatic cleanup.
+ *
+ * @param eventName - The event type to listen for (e.g., 'click', 'scroll', 'keydown')
+ * @param handler - The event handler function
+ * @param element - The target element or window (default: window)
+ * @param options - Event listener options (capture, passive, once)
+ *
+ * @example
+ * // Listen for clicks on window
+ * useEventListener('click', (e) => console.log('Clicked!'));
+ *
+ * @example
+ * // Listen for clicks on a specific element
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ * useEventListener('click', handleClick, buttonRef);
+ *
+ * @example
+ * // With options
+ * useEventListener('scroll', handleScroll, window, { passive: true });
+ */
+export function useEventListener<K extends keyof WindowEventMap>(
+  eventName: K,
+  handler: (event: WindowEventMap[K]) => void,
+  element?: Window,
+  options?: AddEventListenerOptions | boolean,
+): void;
+export function useEventListener<
+  K extends keyof HTMLElementEventMap,
+  T extends HTMLElement = HTMLDivElement,
+>(
+  eventName: K,
+  handler: (event: HTMLElementEventMap[K]) => void,
+  element: React.RefObject<null | T>,
+  options?: AddEventListenerOptions | boolean,
+): void;
+export function useEventListener<K extends keyof DocumentEventMap>(
+  eventName: K,
+  handler: (event: DocumentEventMap[K]) => void,
+  element: Document,
+  options?: AddEventListenerOptions | boolean,
+): void;
+export function useEventListener<
+  KW extends keyof WindowEventMap,
+  KH extends keyof HTMLElementEventMap,
+  KD extends keyof DocumentEventMap,
+  T extends HTMLElement = HTMLElement,
+>(
+  eventName: KD | KH | KW,
+  handler: (
+    event:
+      | DocumentEventMap[KD]
+      | Event
+      | HTMLElementEventMap[KH]
+      | WindowEventMap[KW],
+  ) => void,
+  element?: Document | React.RefObject<null | T> | Window,
+  options?: AddEventListenerOptions | boolean,
+): void {
+  const savedHandler = useRef(handler);
+
+  useEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+
+  useEffect(() => {
+    let targetElement: Document | Element | null | Window;
+
+    if (element === undefined) {
+      targetElement = window;
+    } else if (element instanceof Document || element instanceof Window) {
+      targetElement = element;
+    } else {
+      targetElement = element.current;
+    }
+
+    if (!targetElement?.addEventListener) {
+      return;
+    }
+
+    const eventListener: typeof handler = (event) => {
+      savedHandler.current(event);
+    };
+
+    targetElement.addEventListener(eventName, eventListener, options);
+
+    return () => {
+      targetElement.removeEventListener(eventName, eventListener, options);
+    };
+  }, [eventName, element, options]);
+}
+`, useEventListener_test: `import { cleanup, fireEvent, render } from "@testing-library/react";
+import React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { useEventListener } from "./useEventListener.js";
+
+describe("useEventListener", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should add event listener to window by default", () => {
+    const handler = vi.fn();
+    const addSpy = vi.spyOn(window, "addEventListener");
+
+    const Component = () => {
+      useEventListener("click", handler);
+      return null;
+    };
+
+    render(<Component />);
+
+    expect(addSpy).toHaveBeenCalledWith(
+      "click",
+      expect.any(Function),
+      undefined,
+    );
+    addSpy.mockRestore();
+  });
+
+  it("should call handler when event is fired on window", () => {
+    const handler = vi.fn();
+
+    const Component = () => {
+      useEventListener("click", handler);
+      return null;
+    };
+
+    render(<Component />);
+
+    fireEvent.click(window);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it("should add event listener to ref element", () => {
+    const handler = vi.fn();
+
+    const Component = () => {
+      const ref = React.useRef<HTMLButtonElement>(null);
+      useEventListener("click", handler, ref);
+      return <button ref={ref}>Click me</button>;
+    };
+
+    const { getByText } = render(<Component />);
+
+    fireEvent.click(getByText("Click me"));
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not fire handler when clicking outside ref element", () => {
+    const handler = vi.fn();
+
+    const Component = () => {
+      const ref = React.useRef<HTMLButtonElement>(null);
+      useEventListener("click", handler, ref);
+      return (
+        <div>
+          <button ref={ref}>Target</button>
+          <button>Other</button>
+        </div>
+      );
+    };
+
+    const { getByText } = render(<Component />);
+
+    fireEvent.click(getByText("Other"));
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("should add event listener to document", () => {
+    const handler = vi.fn();
+    const addSpy = vi.spyOn(document, "addEventListener");
+
+    const Component = () => {
+      useEventListener("click", handler, document);
+      return null;
+    };
+
+    render(<Component />);
+
+    expect(addSpy).toHaveBeenCalledWith(
+      "click",
+      expect.any(Function),
+      undefined,
+    );
+    addSpy.mockRestore();
+  });
+
+  it("should remove event listener on unmount", () => {
+    const handler = vi.fn();
+    const removeSpy = vi.spyOn(window, "removeEventListener");
+
+    const Component = () => {
+      useEventListener("click", handler);
+      return null;
+    };
+
+    const { unmount } = render(<Component />);
+    unmount();
+
+    expect(removeSpy).toHaveBeenCalledWith(
+      "click",
+      expect.any(Function),
+      undefined,
+    );
+    removeSpy.mockRestore();
+  });
+
+  it("should pass options to event listener", () => {
+    const handler = vi.fn();
+    const addSpy = vi.spyOn(window, "addEventListener");
+    const options = { capture: true, passive: true };
+
+    const Component = () => {
+      useEventListener("scroll", handler, undefined, options);
+      return null;
+    };
+
+    render(<Component />);
+
+    expect(addSpy).toHaveBeenCalledWith(
+      "scroll",
+      expect.any(Function),
+      options,
+    );
+    addSpy.mockRestore();
+  });
+
+  it("should update handler without re-adding listener", () => {
+    const handler1 = vi.fn();
+    const handler2 = vi.fn();
+    const addSpy = vi.spyOn(window, "addEventListener");
+
+    const Component = ({ handler }: { handler: () => void }) => {
+      useEventListener("click", handler);
+      return null;
+    };
+
+    const { rerender } = render(<Component handler={handler1} />);
+    expect(addSpy).toHaveBeenCalledTimes(1);
+
+    rerender(<Component handler={handler2} />);
+
+    fireEvent.click(window);
+    expect(handler1).not.toHaveBeenCalled();
+    expect(handler2).toHaveBeenCalledTimes(1);
+
+    addSpy.mockRestore();
+  });
+
+  it("should handle keydown events", () => {
+    const handler = vi.fn();
+
+    const Component = () => {
+      useEventListener("keydown", handler);
+      return null;
+    };
+
+    render(<Component />);
+
+    fireEvent.keyDown(window, { key: "Enter" });
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+});
+`,
+    useFetch: `import { useCallback, useEffect, useRef, useState } from "react";
+
+export interface UseFetchOptions<T> {
+  /** Whether to fetch immediately on mount (default: true) */
+  immediate?: boolean;
+  /** Initial data before fetch completes */
+  initialData?: T;
+}
+
+export interface UseFetchResult<T> {
+  /** The fetched data, or undefined if not yet loaded */
+  data: T | undefined;
+  /** Error object if the fetch failed */
+  error: Error | null;
+  /** Whether a fetch is currently in progress */
+  isLoading: boolean;
+  /** Function to manually trigger a refetch */
+  refetch: () => Promise<void>;
+}
+
+/**
+ * Fetch data from a URL with loading and error states.
+ *
+ * @param url - The URL to fetch data from
+ * @param options - Configuration options
+ * @returns Object containing data, loading state, error, and refetch function
+ *
+ * @example
+ * const { data, isLoading, error, refetch } = useFetch<User[]>('/api/users');
+ *
+ * if (isLoading) return <Spinner />;
+ * if (error) return <Error message={error.message} />;
+ * return <UserList users={data} />;
+ *
+ * @example
+ * // With initial data and manual fetch
+ * const { data, refetch } = useFetch<User>('/api/user', {
+ *   initialData: { name: 'Loading...' },
+ *   immediate: false,
+ * });
+ */
+export function useFetch<T>(
+  url: string,
+  options: UseFetchOptions<T> = {},
+): UseFetchResult<T> {
+  const { immediate = true, initialData } = options;
+
+  const [data, setData] = useState<T | undefined>(initialData);
+  const [error, setError] = useState<Error | null>(null);
+  const [isLoading, setIsLoading] = useState(immediate);
+
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const fetchData = useCallback(async () => {
+    // Cancel any in-flight request
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = new AbortController();
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(url, {
+        signal: abortControllerRef.current.signal,
+      });
+
+      if (!response.ok) {
+        throw new Error(\`HTTP error! status: \${String(response.status)}\`);
+      }
+
+      const result = (await response.json()) as T;
+      setData(result);
+    } catch (err) {
+      if (err instanceof Error && err.name !== "AbortError") {
+        setError(err);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [url]);
+
+  useEffect(() => {
+    if (immediate) {
+      void fetchData();
+    }
+
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, [fetchData, immediate]);
+
+  return { data, error, isLoading, refetch: fetchData };
+}
+`, useFetch_test: `import { act, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useFetch } from "./useFetch.js";
+
+describe("useFetch", () => {
+  const mockData = { id: 1, name: "Test" };
+
+  beforeEach(() => {
+    vi.spyOn(global, "fetch").mockImplementation(() =>
+      Promise.resolve({
+        json: () => Promise.resolve(mockData),
+        ok: true,
+      } as Response),
+    );
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should fetch data immediately by default", async () => {
+    const { result } = renderHook(() => useFetch<typeof mockData>("/api/test"));
+
+    expect(result.current.isLoading).toBe(true);
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.data).toEqual(mockData);
+    expect(result.current.error).toBeNull();
+  });
+
+  it("should not fetch immediately when immediate is false", () => {
+    const { result } = renderHook(() =>
+      useFetch<typeof mockData>("/api/test", { immediate: false }),
+    );
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.data).toBeUndefined();
+    expect(global.fetch).not.toHaveBeenCalled();
+  });
+
+  it("should use initial data", () => {
+    const initialData = { id: 0, name: "Initial" };
+    const { result } = renderHook(() =>
+      useFetch<typeof mockData>("/api/test", {
+        immediate: false,
+        initialData,
+      }),
+    );
+
+    expect(result.current.data).toEqual(initialData);
+  });
+
+  it("should handle fetch errors", async () => {
+    vi.spyOn(global, "fetch").mockImplementation(() =>
+      Promise.resolve({
+        ok: false,
+        status: 404,
+      } as Response),
+    );
+
+    const { result } = renderHook(() => useFetch<typeof mockData>("/api/test"));
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.error).toBeInstanceOf(Error);
+    expect(result.current.error?.message).toBe("HTTP error! status: 404");
+  });
+
+  it("should handle network errors", async () => {
+    vi.spyOn(global, "fetch").mockImplementation(() =>
+      Promise.reject(new Error("Network error")),
+    );
+
+    const { result } = renderHook(() => useFetch<typeof mockData>("/api/test"));
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.error?.message).toBe("Network error");
+  });
+
+  it("should refetch data when refetch is called", async () => {
+    const { result } = renderHook(() =>
+      useFetch<typeof mockData>("/api/test", { immediate: false }),
+    );
+
+    expect(global.fetch).not.toHaveBeenCalled();
+
+    await act(async () => {
+      await result.current.refetch();
+    });
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(result.current.data).toEqual(mockData);
+  });
+
+  it("should refetch when URL changes", async () => {
+    const { rerender, result } = renderHook(
+      ({ url }) => useFetch<typeof mockData>(url),
+      { initialProps: { url: "/api/test1" } },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+
+    rerender({ url: "/api/test2" });
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  it("should clear error on successful refetch", async () => {
+    vi.spyOn(global, "fetch").mockImplementationOnce(() =>
+      Promise.resolve({
+        ok: false,
+        status: 500,
+      } as Response),
+    );
+
+    const { result } = renderHook(() => useFetch<typeof mockData>("/api/test"));
+
+    await waitFor(() => {
+      expect(result.current.error).not.toBeNull();
+    });
+
+    vi.spyOn(global, "fetch").mockImplementation(() =>
+      Promise.resolve({
+        json: () => Promise.resolve(mockData),
+        ok: true,
+      } as Response),
+    );
+
+    await act(async () => {
+      await result.current.refetch();
+    });
+
+    expect(result.current.error).toBeNull();
+    expect(result.current.data).toEqual(mockData);
+  });
+});
+`,
+    useHover: `import { useCallback, useRef, useState } from "react";
+
+/**
+ * Tracks mouse hover state on a DOM element via ref.
+ *
+ * @returns Tuple of [isHovered, ref]
+ *
+ * @example
+ * const [isHovered, ref] = useHover();
+ *
+ * return (
+ *   <div
+ *     ref={ref}
+ *     style={{
+ *       backgroundColor: isHovered ? "blue" : "gray",
+ *     }}
+ *   >
+ *     Hover me!
+ *   </div>
+ * );
+ */
+export function useHover<T extends HTMLElement = HTMLElement>(): [
+  boolean,
+  React.RefObject<T>,
+] {
+  const ref = useRef<T>(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+
+  // Attach event listeners to the ref
+  const setRef = useCallback(
+    (element: null | T) => {
+      if (ref.current) {
+        ref.current.removeEventListener("mouseenter", handleMouseEnter);
+        ref.current.removeEventListener("mouseleave", handleMouseLeave);
+      }
+
+      if (element) {
+        element.addEventListener("mouseenter", handleMouseEnter);
+        element.addEventListener("mouseleave", handleMouseLeave);
+      }
+
+      ref.current = element;
+    },
+    [handleMouseEnter, handleMouseLeave],
+  );
+
+  // Return a proxy ref that updates the internal ref
+  return [
+    isHovered,
+    {
+      get current() {
+        return ref.current;
+      },
+      set current(element: null | T) {
+        setRef(element);
+      },
+    } as React.RefObject<T>,
+  ];
+}
+`, useHover_test: `import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { useHover } from "./useHover.js";
+
+function TestComponent() {
+  const [isHovered, ref] = useHover<HTMLDivElement>();
+
+  return (
+    <div data-testid="hover-element" ref={ref}>
+      {isHovered ? "Hovering" : "Not hovering"}
+    </div>
+  );
+}
+
+describe("useHover", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should initialize with false", () => {
+    render(<TestComponent />);
+    const element = screen.getByTestId("hover-element");
+    expect(element.textContent).toBe("Not hovering");
+  });
+
+  it("should set to true on mouseenter", () => {
+    render(<TestComponent />);
+    const element = screen.getByTestId("hover-element");
+
+    fireEvent.mouseEnter(element);
+    expect(element.textContent).toBe("Hovering");
+  });
+
+  it("should set to false on mouseleave", () => {
+    render(<TestComponent />);
+    const element = screen.getByTestId("hover-element");
+
+    fireEvent.mouseEnter(element);
+    expect(element.textContent).toBe("Hovering");
+
+    fireEvent.mouseLeave(element);
+    expect(element.textContent).toBe("Not hovering");
+  });
+
+  it("should handle multiple enter/leave cycles", () => {
+    render(<TestComponent />);
+    const element = screen.getByTestId("hover-element");
+
+    fireEvent.mouseEnter(element);
+    expect(element.textContent).toBe("Hovering");
+
+    fireEvent.mouseLeave(element);
+    expect(element.textContent).toBe("Not hovering");
+
+    fireEvent.mouseEnter(element);
+    expect(element.textContent).toBe("Hovering");
+  });
+});
+`,
+    useIntersectionObserver: `import { useEffect, useRef, useState } from "react";
+
+export interface UseIntersectionObserverOptions {
+  /** Whether to stop observing after the first intersection (default: false) */
+  once?: boolean;
+  /** The element used as the viewport for checking visibility (default: browser viewport) */
+  root?: Element | null;
+  /** Margin around the root element (e.g., "10px 20px 30px 40px") */
+  rootMargin?: string;
+  /** A number or array of numbers indicating at what percentage of visibility the callback should trigger */
+  threshold?: number | number[];
+}
+
+export interface UseIntersectionObserverResult {
+  /** The current intersection observer entry */
+  entry: IntersectionObserverEntry | null;
+  /** Whether the element is currently intersecting */
+  isIntersecting: boolean;
+  /** Ref to attach to the element to observe */
+  ref: React.RefObject<HTMLElement | null>;
+}
+
+/**
+ * Track the visibility of a DOM element within the viewport using IntersectionObserver.
+ *
+ * @param options - IntersectionObserver configuration options
+ * @returns Object containing ref, entry, and isIntersecting state
+ *
+ * @example
+ * // Basic usage - lazy load an image
+ * const { ref, isIntersecting } = useIntersectionObserver();
+ *
+ * return (
+ *   <div ref={ref}>
+ *     {isIntersecting && <img src="large-image.jpg" />}
+ *   </div>
+ * );
+ *
+ * @example
+ * // Infinite scroll with threshold
+ * const { ref, isIntersecting } = useIntersectionObserver({
+ *   threshold: 0.5,
+ *   rootMargin: '100px',
+ * });
+ *
+ * useEffect(() => {
+ *   if (isIntersecting) loadMoreItems();
+ * }, [isIntersecting]);
+ */
+export function useIntersectionObserver(
+  options: UseIntersectionObserverOptions = {},
+): UseIntersectionObserverResult {
+  const {
+    once = false,
+    root = null,
+    rootMargin = "0px",
+    threshold = 0,
+  } = options;
+
+  const ref = useRef<HTMLElement | null>(null);
+  const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);
+  const hasTriggered = useRef(false);
+
+  useEffect(() => {
+    const element = ref.current;
+
+    if (!element || (once && hasTriggered.current)) {
+      return;
+    }
+
+    if (typeof IntersectionObserver === "undefined") {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([observerEntry]) => {
+        if (!observerEntry) {
+          return;
+        }
+
+        setEntry(observerEntry);
+
+        if (once && observerEntry.isIntersecting) {
+          hasTriggered.current = true;
+          observer.disconnect();
+        }
+      },
+      { root, rootMargin, threshold },
+    );
+
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [root, rootMargin, threshold, once]);
+
+  return {
+    entry,
+    isIntersecting: entry?.isIntersecting ?? false,
+    ref,
+  };
+}
+`, useIntersectionObserver_test: `import { cleanup, render, waitFor } from "@testing-library/react";
+import React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useIntersectionObserver } from "./useIntersectionObserver.js";
+
+describe("useIntersectionObserver", () => {
+  let mockObserve: ReturnType<typeof vi.fn>;
+  let mockDisconnect: ReturnType<typeof vi.fn>;
+  let mockCallback: (entries: IntersectionObserverEntry[]) => void;
+  let mockConstructorOptions: IntersectionObserverInit | undefined;
+
+  beforeEach(() => {
+    mockObserve = vi.fn();
+    mockDisconnect = vi.fn();
+    mockConstructorOptions = undefined;
+
+    vi.stubGlobal(
+      "IntersectionObserver",
+      class MockIntersectionObserver {
+        disconnect = mockDisconnect;
+        observe = mockObserve;
+        unobserve = vi.fn();
+        constructor(
+          callback: (entries: IntersectionObserverEntry[]) => void,
+          options?: IntersectionObserverInit,
+        ) {
+          mockCallback = callback;
+          mockConstructorOptions = options;
+        }
+      },
+    );
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.unstubAllGlobals();
+  });
+
+  it("should return ref, entry, and isIntersecting", () => {
+    let hookResult: ReturnType<typeof useIntersectionObserver> | undefined;
+
+    const Component = () => {
+      hookResult = useIntersectionObserver();
+      return (
+        <div ref={hookResult.ref as React.RefObject<HTMLDivElement>}>Test</div>
+      );
+    };
+
+    render(<Component />);
+
+    expect(hookResult?.ref).toBeDefined();
+    expect(hookResult?.entry).toBeNull();
+    expect(hookResult?.isIntersecting).toBe(false);
+  });
+
+  it("should observe the element", () => {
+    const Component = () => {
+      const { ref } = useIntersectionObserver();
+      return <div ref={ref as React.RefObject<HTMLDivElement>}>Test</div>;
+    };
+
+    render(<Component />);
+
+    expect(mockObserve).toHaveBeenCalled();
+  });
+
+  it("should update isIntersecting when element becomes visible", async () => {
+    let hookResult: ReturnType<typeof useIntersectionObserver>;
+
+    const Component = () => {
+      hookResult = useIntersectionObserver();
+      return (
+        <div ref={hookResult.ref as React.RefObject<HTMLDivElement>}>Test</div>
+      );
+    };
+
+    render(<Component />);
+
+    const mockEntry = {
+      boundingClientRect: {} as DOMRectReadOnly,
+      intersectionRatio: 1,
+      intersectionRect: {} as DOMRectReadOnly,
+      isIntersecting: true,
+      rootBounds: null,
+      target: document.createElement("div"),
+      time: Date.now(),
+    } as IntersectionObserverEntry;
+
+    mockCallback([mockEntry]);
+
+    await waitFor(() => {
+      expect(hookResult.isIntersecting).toBe(true);
+      expect(hookResult.entry).toBe(mockEntry);
+    });
+  });
+
+  it("should disconnect on unmount", () => {
+    const Component = () => {
+      const { ref } = useIntersectionObserver();
+      return <div ref={ref as React.RefObject<HTMLDivElement>}>Test</div>;
+    };
+
+    const { unmount } = render(<Component />);
+    unmount();
+
+    expect(mockDisconnect).toHaveBeenCalled();
+  });
+
+  it("should pass options to IntersectionObserver", () => {
+    const options = {
+      root: null,
+      rootMargin: "10px",
+      threshold: 0.5,
+    };
+
+    const Component = () => {
+      const { ref } = useIntersectionObserver(options);
+      return <div ref={ref as React.RefObject<HTMLDivElement>}>Test</div>;
+    };
+
+    render(<Component />);
+
+    expect(mockConstructorOptions).toEqual({
+      root: null,
+      rootMargin: "10px",
+      threshold: 0.5,
+    });
+  });
+
+  it("should disconnect after first intersection when once is true", async () => {
+    let hookResult: ReturnType<typeof useIntersectionObserver>;
+
+    const Component = () => {
+      hookResult = useIntersectionObserver({ once: true });
+      return (
+        <div ref={hookResult.ref as React.RefObject<HTMLDivElement>}>Test</div>
+      );
+    };
+
+    render(<Component />);
+
+    const mockEntry = {
+      isIntersecting: true,
+    } as IntersectionObserverEntry;
+
+    mockCallback([mockEntry]);
+
+    await waitFor(() => {
+      expect(hookResult.isIntersecting).toBe(true);
+    });
+
+    expect(mockDisconnect).toHaveBeenCalled();
+  });
+
+  it("should not disconnect when once is true but not intersecting", async () => {
+    let hookResult: ReturnType<typeof useIntersectionObserver>;
+
+    const Component = () => {
+      hookResult = useIntersectionObserver({ once: true });
+      return (
+        <div ref={hookResult.ref as React.RefObject<HTMLDivElement>}>Test</div>
+      );
+    };
+
+    render(<Component />);
+
+    const mockEntry = {
+      isIntersecting: false,
+    } as IntersectionObserverEntry;
+
+    mockCallback([mockEntry]);
+
+    await waitFor(() => {
+      expect(hookResult.isIntersecting).toBe(false);
+    });
+
+    // Should not disconnect because it hasn't intersected yet
+    expect(mockDisconnect).not.toHaveBeenCalled();
+  });
+
+  it("should handle no element ref gracefully", () => {
+    const Component = () => {
+      const { isIntersecting } = useIntersectionObserver();
+      // Don't attach the ref to any element
+      return (
+        <div>No ref attached, isIntersecting: {String(isIntersecting)}</div>
+      );
+    };
+
+    render(<Component />);
+
+    // Should not observe anything since ref is not attached
+    expect(mockObserve).not.toHaveBeenCalled();
+  });
+
+  it("should handle IntersectionObserver being undefined (SSR)", () => {
+    vi.stubGlobal("IntersectionObserver", undefined);
+
+    const Component = () => {
+      const { isIntersecting, ref } = useIntersectionObserver();
+      return (
+        <div ref={ref as React.RefObject<HTMLDivElement>}>
+          SSR: {String(isIntersecting)}
+        </div>
+      );
+    };
+
+    // Should not throw
+    render(<Component />);
+    expect(mockObserve).not.toHaveBeenCalled();
+  });
+});
+`,
+    useInterval: `import { useEffect } from "react";
+
+/**
+ * Calls a callback at specified intervals.
+ *
+ * @param callback - Function to call on each interval
+ * @param delay - Interval delay in milliseconds (null to pause)
+ *
+ * @example
+ * useInterval(() => {
+ *   setTime(new Date());
+ * }, 1000);
+ *
+ * @example
+ * // Pause interval by passing null
+ * useInterval(callback, isPaused ? null : 1000);
+ */
+export function useInterval(callback: () => void, delay: null | number): void {
+  useEffect(() => {
+    if (delay === null) return;
+
+    const interval = setInterval(callback, delay);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [callback, delay]);
+}
+`, useInterval_test: `import { renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useInterval } from "./useInterval.js";
+
+describe("useInterval", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should call callback at interval", () => {
+    const callback = vi.fn();
+    renderHook(() => {
+      useInterval(callback, 1000);
+    });
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+
+  it("should pause when delay is null", () => {
+    const callback = vi.fn();
+    const { rerender } = renderHook(
+      ({ delay }: { delay: null | number }) => {
+        useInterval(callback, delay);
+      },
+      { initialProps: { delay: 1000 as null | number } },
+    );
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    rerender({ delay: null });
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should cleanup interval on unmount", () => {
+    const callback = vi.fn();
+    const { unmount } = renderHook(() => {
+      useInterval(callback, 1000);
+    });
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    unmount();
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});
+`,
+    useIsClient: `import { useSyncExternalStore } from "react";
+
+/**
+ * Determine if the code is running on the client-side.
+ * Useful for SSR-safe code that needs to access browser APIs.
+ *
+ * @returns true if running on client, false during SSR
+ *
+ * @example
+ * const isClient = useIsClient();
+ *
+ * if (!isClient) {
+ *   return <div>Loading...</div>;
+ * }
+ *
+ * // Safe to use browser APIs
+ * return <div>Window width: {window.innerWidth}</div>;
+ *
+ * @example
+ * // Conditionally render client-only components
+ * const isClient = useIsClient();
+ *
+ * return (
+ *   <div>
+ *     <Header />
+ *     {isClient && <ClientOnlyMap />}
+ *     <Footer />
+ *   </div>
+ * );
+ */
+export function useIsClient(): boolean {
+  return useSyncExternalStore(
+    () => {
+      // Subscribe function that returns cleanup noop
+      return function noopCleanup() {
+        // Intentionally empty - no subscriptions needed
+      };
+    },
+    () => true, // Client snapshot - always true on client
+    () => false, // Server snapshot - always false during SSR
+  );
+}
+`, useIsClient_test: `import { renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { useIsClient } from "./useIsClient.js";
+
+describe("useIsClient", () => {
+  it("should return true after mount", () => {
+    const { result } = renderHook(() => useIsClient());
+
+    // After the initial render and useEffect, isClient should be true
+    expect(result.current).toBe(true);
+  });
+
+  it("should return consistent value across re-renders", () => {
+    const { rerender, result } = renderHook(() => useIsClient());
+
+    expect(result.current).toBe(true);
+
+    rerender();
+    expect(result.current).toBe(true);
+
+    rerender();
+    expect(result.current).toBe(true);
+  });
+});
+`,
+    useKeyPress: `import { useEffect, useState } from "react";
+
+/**
+ * Detects if a specific keyboard key is currently pressed.
+ *
+ * @param targetKey - The key to detect (e.g., "Enter", "ArrowUp", " " for space)
+ * @returns Whether the key is currently pressed
+ *
+ * @example
+ * const isEnterPressed = useKeyPress("Enter");
+ * const isArrowUpPressed = useKeyPress("ArrowUp");
+ *
+ * return (
+ *   <div>
+ *     <p>Enter pressed: {isEnterPressed ? "Yes" : "No"}</p>
+ *     <p>Arrow Up pressed: {isArrowUpPressed ? "Yes" : "No"}</p>
+ *   </div>
+ * );
+ */
+export function useKeyPress(targetKey: string): boolean {
+  const [isKeyPressed, setIsKeyPressed] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === targetKey) {
+        setIsKeyPressed(true);
+      }
+    };
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key === targetKey) {
+        setIsKeyPressed(false);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, [targetKey]);
+
+  return isKeyPressed;
+}
+`, useKeyPress_test: `import { act, renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { useKeyPress } from "./useKeyPress.js";
+
+describe("useKeyPress", () => {
+  it("should initialize with false", () => {
+    const { result } = renderHook(() => useKeyPress("Enter"));
+    expect(result.current).toBe(false);
+  });
+
+  it("should set to true on keydown", async () => {
+    const { result } = renderHook(() => useKeyPress("Enter"));
+
+    act(() => {
+      const event = new KeyboardEvent("keydown", { key: "Enter" });
+      window.dispatchEvent(event);
+    });
+
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
+  });
+
+  it("should set to false on keyup", async () => {
+    const { result } = renderHook(() => useKeyPress("Enter"));
+
+    act(() => {
+      const downEvent = new KeyboardEvent("keydown", { key: "Enter" });
+      window.dispatchEvent(downEvent);
+    });
+
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
+
+    act(() => {
+      const upEvent = new KeyboardEvent("keyup", { key: "Enter" });
+      window.dispatchEvent(upEvent);
+    });
+
+    await waitFor(() => {
+      expect(result.current).toBe(false);
+    });
+  });
+
+  it("should ignore other keys", () => {
+    const { result } = renderHook(() => useKeyPress("Enter"));
+
+    act(() => {
+      const event = new KeyboardEvent("keydown", { key: "a" });
+      window.dispatchEvent(event);
+    });
+
+    // Should still be false
+    expect(result.current).toBe(false);
+  });
+
+  it("should work with different keys", async () => {
+    const { result: resultA } = renderHook(() => useKeyPress("ArrowUp"));
+    const { result: resultEnter } = renderHook(() => useKeyPress("Enter"));
+
+    act(() => {
+      const event = new KeyboardEvent("keydown", { key: "ArrowUp" });
+      window.dispatchEvent(event);
+    });
+
+    await waitFor(() => {
+      expect(resultA.current).toBe(true);
+      expect(resultEnter.current).toBe(false);
+    });
+  });
+
+  it("should handle space key", async () => {
+    const { result } = renderHook(() => useKeyPress(" "));
+
+    act(() => {
+      const event = new KeyboardEvent("keydown", { key: " " });
+      window.dispatchEvent(event);
+    });
+
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
+  });
+
+  it("should clean up event listeners on unmount", () => {
+    const removeEventListenerSpy = vi.spyOn(window, "removeEventListener");
+    const { unmount } = renderHook(() => useKeyPress("Enter"));
+
+    unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      "keydown",
+      expect.any(Function),
+    );
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      "keyup",
+      expect.any(Function),
+    );
+
+    removeEventListenerSpy.mockRestore();
+  });
+});
+`,
+    useLocalStorage: `import { useCallback, useEffect, useState } from "react";
+
+/**
+ * Syncs state with localStorage, persisting across browser sessions.
+ *
+ * @param key - The localStorage key
+ * @param initialValue - The initial value (used if no stored value exists)
+ * @returns A tuple of [value, setValue, removeValue]
+ *
+ * @example
+ * const [theme, setTheme, removeTheme] = useLocalStorage("theme", "light");
+ *
+ * // Update the theme (automatically persisted)
+ * setTheme("dark");
+ *
+ * // Remove from localStorage
+ * removeTheme();
+ */
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+): [T, (value: ((prev: T) => T) | T) => void, () => void] {
+  // Get initial value from localStorage or use provided initial value
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === "undefined") {
+      return initialValue;
+    }
+
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? (JSON.parse(item) as T) : initialValue;
+    } catch (error) {
+      console.warn(\`Error reading localStorage key "\${key}":\`, error);
+      return initialValue;
+    }
+  });
+
+  // Update localStorage when value changes
+  const setValue = useCallback(
+    (value: ((prev: T) => T) | T) => {
+      try {
+        setStoredValue((prev) => {
+          const valueToStore = value instanceof Function ? value(prev) : value;
+          if (typeof window !== "undefined") {
+            window.localStorage.setItem(key, JSON.stringify(valueToStore));
+          }
+          return valueToStore;
+        });
+      } catch (error) {
+        console.warn(\`Error setting localStorage key "\${key}":\`, error);
+      }
+    },
+    [key],
+  );
+
+  // Remove from localStorage
+  const removeValue = useCallback(() => {
+    try {
+      if (typeof window !== "undefined") {
+        window.localStorage.removeItem(key);
+      }
+      setStoredValue(initialValue);
+    } catch (error) {
+      console.warn(\`Error removing localStorage key "\${key}":\`, error);
+    }
+  }, [key, initialValue]);
+
+  // Listen for changes in other tabs/windows
+  useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key === key && event.newValue !== null) {
+        try {
+          setStoredValue(JSON.parse(event.newValue) as T);
+        } catch (error) {
+          console.warn(\`Error parsing localStorage key "\${key}":\`, error);
+        }
+      }
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+    };
+  }, [key]);
+
+  return [storedValue, setValue, removeValue];
+}
+`, useLocalStorage_test: `import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useLocalStorage } from "./useLocalStorage.js";
+
+describe("useLocalStorage", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    localStorage.clear();
+  });
+
+  it("should return initial value when localStorage is empty", () => {
+    const { result } = renderHook(() =>
+      useLocalStorage("testKey", "defaultValue"),
+    );
+
+    expect(result.current[0]).toBe("defaultValue");
+  });
+
+  it("should return stored value from localStorage", () => {
+    localStorage.setItem("testKey", JSON.stringify("storedValue"));
+
+    const { result } = renderHook(() =>
+      useLocalStorage("testKey", "defaultValue"),
+    );
+
+    expect(result.current[0]).toBe("storedValue");
+  });
+
+  it("should update value and localStorage", () => {
+    const { result } = renderHook(() =>
+      useLocalStorage("testKey", "defaultValue"),
+    );
+
+    act(() => {
+      result.current[1]("newValue");
+    });
+
+    expect(result.current[0]).toBe("newValue");
+    expect(localStorage.getItem("testKey")).toBe(JSON.stringify("newValue"));
+  });
+
+  it("should support function updates", () => {
+    const { result } = renderHook(() => useLocalStorage("counter", 0));
+
+    act(() => {
+      result.current[1]((prev) => prev + 1);
+    });
+
+    expect(result.current[0]).toBe(1);
+
+    act(() => {
+      result.current[1]((prev) => prev + 5);
+    });
+
+    expect(result.current[0]).toBe(6);
+  });
+
+  it("should remove value from localStorage", () => {
+    localStorage.setItem("testKey", JSON.stringify("storedValue"));
+
+    const { result } = renderHook(() =>
+      useLocalStorage("testKey", "defaultValue"),
+    );
+
+    act(() => {
+      result.current[2]();
+    });
+
+    expect(result.current[0]).toBe("defaultValue");
+    expect(localStorage.getItem("testKey")).toBeNull();
+  });
+
+  it("should handle complex objects", () => {
+    const initialValue = { age: 30, name: "John" };
+
+    const { result } = renderHook(() => useLocalStorage("user", initialValue));
+
+    expect(result.current[0]).toEqual(initialValue);
+
+    const newValue = { age: 25, name: "Jane" };
+    act(() => {
+      result.current[1](newValue);
+    });
+
+    expect(result.current[0]).toEqual(newValue);
+    const storedValue = localStorage.getItem("user");
+    expect(storedValue).not.toBeNull();
+    expect(JSON.parse(storedValue ?? "")).toEqual(newValue);
+  });
+
+  it("should handle arrays", () => {
+    const { result } = renderHook(() => useLocalStorage<string[]>("items", []));
+
+    act(() => {
+      result.current[1](["a", "b", "c"]);
+    });
+
+    expect(result.current[0]).toEqual(["a", "b", "c"]);
+  });
+
+  it("should handle parse errors when reading from localStorage", () => {
+    localStorage.setItem("badKey", "invalid json");
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(vi.fn());
+
+    const { result } = renderHook(() =>
+      useLocalStorage("badKey", "defaultValue"),
+    );
+
+    expect(result.current[0]).toBe("defaultValue");
+    expect(warnSpy).toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it("should handle parse errors in storage event", () => {
+    renderHook(() => useLocalStorage("testKey", "defaultValue"));
+
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(vi.fn());
+
+    act(() => {
+      const event = new StorageEvent("storage", {
+        key: "testKey",
+        newValue: "invalid json",
+      });
+      window.dispatchEvent(event);
+    });
+
+    expect(warnSpy).toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it("should ignore storage events for different keys", () => {
+    const { result } = renderHook(() =>
+      useLocalStorage("testKey", "defaultValue"),
+    );
+
+    act(() => {
+      const event = new StorageEvent("storage", {
+        key: "otherKey",
+        newValue: JSON.stringify("value"),
+      });
+      window.dispatchEvent(event);
+    });
+
+    expect(result.current[0]).toBe("defaultValue");
+  });
+
+  it("should ignore storage events with null newValue", () => {
+    const { result } = renderHook(() =>
+      useLocalStorage("testKey", "defaultValue"),
+    );
+
+    act(() => {
+      const event = new StorageEvent("storage", {
+        key: "testKey",
+        newValue: null,
+      });
+      window.dispatchEvent(event);
+    });
+
+    expect(result.current[0]).toBe("defaultValue");
+  });
+
+  it("should handle updates from other tabs/windows", () => {
+    const { result } = renderHook(() =>
+      useLocalStorage("testKey", "defaultValue"),
+    );
+
+    act(() => {
+      const event = new StorageEvent("storage", {
+        key: "testKey",
+        newValue: JSON.stringify("valueFromOtherTab"),
+      });
+      window.dispatchEvent(event);
+    });
+
+    expect(result.current[0]).toBe("valueFromOtherTab");
+  });
+
+  it("should cleanup event listener on unmount", () => {
+    const removeEventListenerSpy = vi.spyOn(window, "removeEventListener");
+
+    const { unmount } = renderHook(() =>
+      useLocalStorage("testKey", "defaultValue"),
+    );
+
+    unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      "storage",
+      expect.any(Function),
+    );
+    removeEventListenerSpy.mockRestore();
+  });
+});
+
+it("should handle initial read with null value", () => {
+  const { result } = renderHook(() =>
+    useLocalStorage("nullKey", "defaultValue"),
+  );
+
+  expect(result.current[0]).toBe("defaultValue");
+});
+
+it("should handle edge case with empty string key", () => {
+  const { result } = renderHook(() => useLocalStorage("", "defaultValue"));
+
+  act(() => {
+    result.current[1]("newValue");
+  });
+
+  expect(result.current[0]).toBe("newValue");
+});
+`,
+    useLockBodyScroll: `import { useEffect, useRef } from "react";
+
+/**
+ * Temporarily disable scrolling on the document body.
+ * Useful for modals, drawers, and other overlays.
+ *
+ * @example
+ * // Lock body scroll when modal is open
+ * function Modal({ isOpen }) {
+ *   useLockBodyScroll(isOpen);
+ *
+ *   if (!isOpen) return null;
+ *   return <div className="modal">...</div>;
+ * }
+ *
+ * @example
+ * // Always lock when component is mounted
+ * function FullscreenOverlay() {
+ *   useLockBodyScroll();
+ *   return <div className="overlay">...</div>;
+ * }
+ */
+export function useLockBodyScroll(lock = true): void {
+  const originalStyle = useRef<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+
+    if (!lock) {
+      return;
+    }
+
+    // Store the original overflow style
+    originalStyle.current = document.body.style.overflow;
+
+    // Lock the body scroll
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      // Restore the original overflow style
+      document.body.style.overflow = originalStyle.current ?? "";
+    };
+  }, [lock]);
+}
+`, useLockBodyScroll_test: `import { cleanup, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { useLockBodyScroll } from "./useLockBodyScroll.js";
+
+describe("useLockBodyScroll", () => {
+  beforeEach(() => {
+    document.body.style.overflow = "";
+  });
+
+  afterEach(() => {
+    cleanup();
+    document.body.style.overflow = "";
+  });
+
+  it("should lock body scroll by default", () => {
+    renderHook(() => {
+      useLockBodyScroll();
+    });
+
+    expect(document.body.style.overflow).toBe("hidden");
+  });
+
+  it("should lock body scroll when lock is true", () => {
+    renderHook(() => {
+      useLockBodyScroll(true);
+    });
+
+    expect(document.body.style.overflow).toBe("hidden");
+  });
+
+  it("should not lock body scroll when lock is false", () => {
+    renderHook(() => {
+      useLockBodyScroll(false);
+    });
+
+    expect(document.body.style.overflow).toBe("");
+  });
+
+  it("should restore original overflow on unmount", () => {
+    document.body.style.overflow = "auto";
+
+    const { unmount } = renderHook(() => {
+      useLockBodyScroll();
+    });
+
+    expect(document.body.style.overflow).toBe("hidden");
+
+    unmount();
+    expect(document.body.style.overflow).toBe("auto");
+  });
+
+  it("should toggle lock when lock parameter changes", () => {
+    const { rerender } = renderHook(
+      ({ lock }) => {
+        useLockBodyScroll(lock);
+      },
+      {
+        initialProps: { lock: false },
+      },
+    );
+
+    expect(document.body.style.overflow).toBe("");
+
+    rerender({ lock: true });
+    expect(document.body.style.overflow).toBe("hidden");
+
+    rerender({ lock: false });
+    expect(document.body.style.overflow).toBe("");
+  });
+
+  it("should handle empty string as original overflow", () => {
+    document.body.style.overflow = "";
+
+    const { unmount } = renderHook(() => {
+      useLockBodyScroll();
+    });
+
+    expect(document.body.style.overflow).toBe("hidden");
+
+    unmount();
+    expect(document.body.style.overflow).toBe("");
+  });
+
+  it("should preserve scroll-y overflow style", () => {
+    document.body.style.overflow = "scroll";
+
+    const { unmount } = renderHook(() => {
+      useLockBodyScroll();
+    });
+
+    expect(document.body.style.overflow).toBe("hidden");
+
+    unmount();
+    expect(document.body.style.overflow).toBe("scroll");
+  });
+});
+`,
+    useMeasure: `import { useCallback, useEffect, useRef, useState } from "react";
+
+export interface UseMeasureRect {
+  /** Bottom position relative to viewport */
+  bottom: number;
+  /** Element height */
+  height: number;
+  /** Left position relative to viewport */
+  left: number;
+  /** Right position relative to viewport */
+  right: number;
+  /** Top position relative to viewport */
+  top: number;
+  /** Element width */
+  width: number;
+  /** X position (same as left) */
+  x: number;
+  /** Y position (same as top) */
+  y: number;
+}
+
+export interface UseMeasureResult<T extends Element> {
+  /** The measured dimensions of the element */
+  rect: UseMeasureRect;
+  /** Ref to attach to the element to measure */
+  ref: React.RefCallback<T>;
+}
+
+const defaultRect: UseMeasureRect = {
+  bottom: 0,
+  height: 0,
+  left: 0,
+  right: 0,
+  top: 0,
+  width: 0,
+  x: 0,
+  y: 0,
+};
+
+/**
+ * Measure the dimensions of a DOM element using ResizeObserver.
+ *
+ * @returns Object containing ref callback and rect measurements
+ *
+ * @example
+ * const { ref, rect } = useMeasure<HTMLDivElement>();
+ *
+ * return (
+ *   <div ref={ref}>
+ *     <p>Width: {rect.width}px</p>
+ *     <p>Height: {rect.height}px</p>
+ *   </div>
+ * );
+ *
+ * @example
+ * // Responsive component
+ * const { ref, rect } = useMeasure<HTMLDivElement>();
+ * const isCompact = rect.width < 400;
+ *
+ * return (
+ *   <nav ref={ref} className={isCompact ? 'compact' : 'full'}>
+ *     {isCompact ? <MobileMenu /> : <DesktopMenu />}
+ *   </nav>
+ * );
+ */
+export function useMeasure<
+  T extends Element = HTMLDivElement,
+>(): UseMeasureResult<T> {
+  const [element, setElement] = useState<null | T>(null);
+  const [rect, setRect] = useState<UseMeasureRect>(defaultRect);
+
+  const observerRef = useRef<null | ResizeObserver>(null);
+
+  const ref = useCallback((node: null | T) => {
+    setElement(node);
+  }, []);
+
+  useEffect(() => {
+    if (!element) {
+      return;
+    }
+
+    if (typeof ResizeObserver === "undefined") {
+      // Fallback: get initial dimensions without observing changes
+      const boundingRect = element.getBoundingClientRect();
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setRect({
+        bottom: boundingRect.bottom,
+        height: boundingRect.height,
+        left: boundingRect.left,
+        right: boundingRect.right,
+        top: boundingRect.top,
+        width: boundingRect.width,
+        x: boundingRect.x,
+        y: boundingRect.y,
+      });
+      return;
+    }
+
+    observerRef.current = new ResizeObserver(([entry]) => {
+      if (entry) {
+        const boundingRect = entry.target.getBoundingClientRect();
+        setRect({
+          bottom: boundingRect.bottom,
+          height: boundingRect.height,
+          left: boundingRect.left,
+          right: boundingRect.right,
+          top: boundingRect.top,
+          width: boundingRect.width,
+          x: boundingRect.x,
+          y: boundingRect.y,
+        });
+      }
+    });
+
+    observerRef.current.observe(element);
+
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [element]);
+
+  return { rect, ref };
+}
+`, useMeasure_test: `import { cleanup, render, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useMeasure } from "./useMeasure.js";
+
+describe("useMeasure", () => {
+  let mockObserve: ReturnType<typeof vi.fn>;
+  let mockDisconnect: ReturnType<typeof vi.fn>;
+  let mockCallback: (entries: ResizeObserverEntry[]) => void;
+
+  const mockBoundingRect = {
+    bottom: 200,
+    height: 100,
+    left: 50,
+    right: 250,
+    top: 100,
+    width: 200,
+    x: 50,
+    y: 100,
+  };
+
+  beforeEach(() => {
+    mockObserve = vi.fn();
+    mockDisconnect = vi.fn();
+
+    vi.stubGlobal(
+      "ResizeObserver",
+      class MockResizeObserver {
+        disconnect = mockDisconnect;
+        observe = mockObserve;
+        unobserve = vi.fn();
+        constructor(callback: (entries: ResizeObserverEntry[]) => void) {
+          mockCallback = callback;
+        }
+      },
+    );
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.unstubAllGlobals();
+  });
+
+  it("should return ref and initial rect with zeros", () => {
+    let result: ReturnType<typeof useMeasure> | undefined;
+
+    const Component = () => {
+      result = useMeasure();
+      return <div ref={result.ref}>Test</div>;
+    };
+
+    render(<Component />);
+
+    expect(typeof result?.ref).toBe("function");
+    expect(result?.rect).toEqual({
+      bottom: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+      width: 0,
+      x: 0,
+      y: 0,
+    });
+  });
+
+  it("should observe the element", () => {
+    const Component = () => {
+      const { ref } = useMeasure();
+      return <div ref={ref}>Test</div>;
+    };
+
+    render(<Component />);
+
+    expect(mockObserve).toHaveBeenCalled();
+  });
+
+  it("should update rect when element is resized", async () => {
+    let result: ReturnType<typeof useMeasure> | undefined;
+
+    const Component = () => {
+      result = useMeasure();
+      return <div ref={result.ref}>Test</div>;
+    };
+
+    render(<Component />);
+
+    const mockEntry = {
+      target: {
+        getBoundingClientRect: () => mockBoundingRect,
+      },
+    } as unknown as ResizeObserverEntry;
+
+    mockCallback([mockEntry]);
+
+    await waitFor(() => {
+      expect(result?.rect).toEqual(mockBoundingRect);
+    });
+  });
+
+  it("should disconnect on unmount", () => {
+    const Component = () => {
+      const { ref } = useMeasure();
+      return <div ref={ref}>Test</div>;
+    };
+
+    const { unmount } = render(<Component />);
+    unmount();
+
+    expect(mockDisconnect).toHaveBeenCalled();
+  });
+
+  it("should handle null ref", () => {
+    let result: ReturnType<typeof useMeasure>;
+
+    const Component = ({ show }: { show: boolean }) => {
+      result = useMeasure();
+      return show ? <div ref={result.ref}>Test</div> : null;
+    };
+
+    const { rerender } = render(<Component show={true} />);
+
+    expect(mockObserve).toHaveBeenCalledTimes(1);
+
+    rerender(<Component show={false} />);
+
+    // Observer should be disconnected when element is removed
+    expect(mockDisconnect).toHaveBeenCalled();
+  });
+
+  it("should re-observe when element changes", async () => {
+    let result: ReturnType<typeof useMeasure>;
+
+    const Component = ({ id }: { id: string }) => {
+      result = useMeasure();
+      return (
+        <div key={id} ref={result.ref}>
+          {id}
+        </div>
+      );
+    };
+
+    const { rerender } = render(<Component id="first" />);
+
+    expect(mockObserve).toHaveBeenCalledTimes(1);
+
+    rerender(<Component id="second" />);
+
+    await waitFor(() => {
+      expect(mockObserve).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  it("should fallback to getBoundingClientRect when ResizeObserver is undefined", () => {
+    vi.stubGlobal("ResizeObserver", undefined);
+
+    const mockRect = {
+      bottom: 100,
+      height: 50,
+      left: 10,
+      right: 110,
+      top: 50,
+      width: 100,
+      x: 10,
+      y: 50,
+    };
+
+    let result: ReturnType<typeof useMeasure> | undefined;
+
+    const Component = () => {
+      result = useMeasure();
+      return (
+        <div
+          ref={(node) => {
+            if (node) {
+              vi.spyOn(node, "getBoundingClientRect").mockReturnValue(
+                mockRect as DOMRect,
+              );
+            }
+            result?.ref(node);
+          }}
+        >
+          Test
+        </div>
+      );
+    };
+
+    render(<Component />);
+
+    // Should have initial rect from getBoundingClientRect fallback
+    expect(result?.rect.width).toBe(100);
+    expect(result?.rect.height).toBe(50);
+  });
+});
+`,
+    useMedia: `import { useEffect, useState } from "react";
+
+/**
+ * Reacts to CSS media query changes.
+ *
+ * @param query - CSS media query string (e.g., "(max-width: 768px)")
+ * @returns Whether the media query matches
+ *
+ * @example
+ * const isMobile = useMedia("(max-width: 768px)");
+ * const isDarkMode = useMedia("(prefers-color-scheme: dark)");
+ *
+ * return (
+ *   <div>
+ *     <p>Is mobile: {isMobile ? "Yes" : "No"}</p>
+ *     <p>Dark mode: {isDarkMode ? "Yes" : "No"}</p>
+ *   </div>
+ * );
+ */
+export function useMedia(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    // Check if window is defined (SSR safety)
+    if (typeof window === "undefined") {
+      return undefined;
+    }
+
+    try {
+      const mediaQueryList = window.matchMedia(query);
+
+      // Set initial value
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setMatches(mediaQueryList.matches);
+
+      // Create listener function
+      const handleChange = (e: MediaQueryListEvent) => {
+        setMatches(e.matches);
+      };
+
+      // Modern browsers use addEventListener
+      mediaQueryList.addEventListener("change", handleChange);
+      return () => {
+        mediaQueryList.removeEventListener("change", handleChange);
+      };
+    } catch (error) {
+      console.warn(\`Invalid media query: "\${query}"\`, error);
+      return undefined;
+    }
+  }, [query]);
+
+  return matches;
+}
+`, useMedia_test: `import { renderHook, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useMedia } from "./useMedia.js";
+
+describe("useMedia", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should initialize with false for non-matching query", () => {
+    // Mock window.matchMedia
+    Object.defineProperty(window, "matchMedia", {
+      value: vi.fn(() => ({
+        addEventListener: vi.fn(),
+        matches: false,
+        removeEventListener: vi.fn(),
+      })),
+      writable: true,
+    });
+
+    const { result } = renderHook(() => useMedia("(max-width: 480px)"));
+    expect(result.current).toBe(false);
+  });
+
+  it("should match media query", () => {
+    Object.defineProperty(window, "matchMedia", {
+      value: vi.fn(() => ({
+        addEventListener: vi.fn(),
+        matches: true,
+        removeEventListener: vi.fn(),
+      })),
+      writable: true,
+    });
+
+    const { result } = renderHook(() => useMedia("(min-width: 0px)"));
+    expect(result.current).toBe(true);
+  });
+
+  it("should update on media query change", async () => {
+    let listenerFn: ((e: MediaQueryListEvent) => void) | null = null;
+
+    Object.defineProperty(window, "matchMedia", {
+      value: vi.fn(() => ({
+        addEventListener: vi.fn(
+          (_: string, fn: (e: MediaQueryListEvent) => void) => {
+            listenerFn = fn;
+          },
+        ),
+        matches: false,
+        removeEventListener: vi.fn(),
+      })),
+      writable: true,
+    });
+
+    const { result } = renderHook(() => useMedia("(max-width: 768px)"));
+    expect(result.current).toBe(false);
+
+    // Trigger the change listener
+    expect(listenerFn).toBeDefined();
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    listenerFn!({
+      matches: true,
+      media: "(max-width: 768px)",
+    } as unknown as MediaQueryListEvent);
+
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
+  });
+
+  it("should handle invalid media query gracefully", () => {
+    const consoleSpy = vi
+      .spyOn(console, "warn")
+      .mockImplementation(() => undefined);
+
+    Object.defineProperty(window, "matchMedia", {
+      value: vi.fn(() => {
+        throw new Error("Invalid media query");
+      }),
+      writable: true,
+    });
+
+    const { result } = renderHook(() => useMedia("invalid()"));
+    expect(result.current).toBe(false);
+    expect(consoleSpy).toHaveBeenCalled();
+
+    consoleSpy.mockRestore();
+  });
+
+  it("should work with prefers-color-scheme", () => {
+    Object.defineProperty(window, "matchMedia", {
+      value: vi.fn(() => ({
+        addEventListener: vi.fn(),
+        matches: false,
+        removeEventListener: vi.fn(),
+      })),
+      writable: true,
+    });
+
+    const { result } = renderHook(() =>
+      useMedia("(prefers-color-scheme: dark)"),
+    );
+    expect(typeof result.current).toBe("boolean");
+  });
+
+  it("should update when query changes", () => {
+    Object.defineProperty(window, "matchMedia", {
+      value: vi.fn(() => ({
+        addEventListener: vi.fn(),
+        matches: false,
+        removeEventListener: vi.fn(),
+      })),
+      writable: true,
+    });
+
+    const { rerender, result } = renderHook(({ query }) => useMedia(query), {
+      initialProps: { query: "(max-width: 768px)" },
+    });
+
+    rerender({ query: "(max-width: 480px)" });
+
+    expect(typeof result.current).toBe("boolean");
+  });
+
+  it("should clean up listeners on unmount", () => {
+    const mockRemoveEventListener = vi.fn();
+
+    Object.defineProperty(window, "matchMedia", {
+      value: vi.fn(() => ({
+        addEventListener: vi.fn(),
+        matches: false,
+        removeEventListener: mockRemoveEventListener,
+      })),
+      writable: true,
+    });
+
+    const { unmount } = renderHook(() => useMedia("(max-width: 768px)"));
+
+    unmount();
+
+    expect(mockRemoveEventListener).toHaveBeenCalledWith(
+      "change",
+      expect.any(Function),
+    );
+  });
+});
+`,
+    useMount: `import { useEffect } from "react";
+
+/**
+ * Calls a callback on component mount.
+ *
+ * @param callback - Function to call on mount
+ *
+ * @example
+ * useMount(() => {
+ *   console.log("Component mounted");
+ *   // Initialize resources
+ * });
+ */
+export function useMount(callback: () => void): void {
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally only run on mount
+  useEffect(callback, []);
+}
+`, useMount_test: `import { renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { useMount } from "./useMount.js";
+
+describe("useMount", () => {
+  it("should call callback on mount", () => {
+    const callback = vi.fn();
+    renderHook(() => {
+      useMount(callback);
+    });
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not call callback on rerender", () => {
+    const callback = vi.fn();
+    const { rerender } = renderHook(() => {
+      useMount(callback);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    rerender();
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});
+`,
+    usePrevious: `import { useState } from "react";
+
+/**
+ * Tracks the previous value or prop.
+ *
+ * @param value - The current value to track
+ * @returns The previous value from the last render
+ *
+ * @example
+ * const [count, setCount] = useState(0);
+ * const prevCount = usePrevious(count);
+ *
+ * useEffect(() => {
+ *   console.log(\`Current: \${count}, Previous: \${prevCount}\`);
+ * }, [count, prevCount]);
+ */
+export function usePrevious<T>(value: T): T | undefined {
+  const [current, setCurrent] = useState<T>(value);
+  const [previous, setPrevious] = useState<T | undefined>(undefined);
+
+  if (current !== value) {
+    setPrevious(current);
+    setCurrent(value);
+  }
+
+  return previous;
+}
+`, usePrevious_test: `import { renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { usePrevious } from "./usePrevious.js";
+
+describe("usePrevious", () => {
+  it("should return undefined on first render", () => {
+    const { result } = renderHook(() => usePrevious(5));
+    expect(result.current).toBeUndefined();
+  });
+
+  it("should return previous value on subsequent renders", () => {
+    const { rerender, result } = renderHook(({ value }) => usePrevious(value), {
+      initialProps: { value: 1 },
+    });
+
+    expect(result.current).toBeUndefined();
+
+    rerender({ value: 2 });
+    expect(result.current).toBe(1);
+
+    rerender({ value: 3 });
+    expect(result.current).toBe(2);
+  });
+
+  it("should work with different types", () => {
+    const obj = { name: "Alice" };
+    const { rerender, result } = renderHook(({ value }) => usePrevious(value), {
+      initialProps: { value: obj },
+    });
+
+    expect(result.current).toBeUndefined();
+
+    const newObj = { name: "Bob" };
+    rerender({ value: newObj });
+    expect(result.current).toBe(obj);
+  });
+});
+`,
+    useScroll: `import { useCallback, useEffect, useState } from "react";
+
+interface ScrollPosition {
+  x: number;
+  y: number;
+}
+
+/**
+ * Tracks scroll position of an element or the window.
+ *
+ * @param ref - Optional ref to an element. If not provided, tracks window scroll
+ * @returns Object with x and y scroll positions
+ *
+ * @example
+ * // Track window scroll
+ * const scroll = useScroll();
+ * console.log(scroll.x, scroll.y);
+ *
+ * @example
+ * // Track element scroll
+ * const elementRef = useRef<HTMLDivElement>(null);
+ * const scroll = useScroll(elementRef);
+ * return <div ref={elementRef} style={{ overflow: 'auto' }}>Content</div>;
+ */
+export function useScroll(
+  ref?: React.RefObject<HTMLElement | null>,
+): ScrollPosition {
+  const [scroll, setScroll] = useState<ScrollPosition>({ x: 0, y: 0 });
+
+  const handleScroll = useCallback(() => {
+    if (ref?.current) {
+      setScroll({
+        x: ref.current.scrollLeft,
+        y: ref.current.scrollTop,
+      });
+    } else if (typeof window !== "undefined") {
+      setScroll({
+        x: window.scrollX,
+        y: window.scrollY,
+      });
+    }
+  }, [ref]);
+
+  useEffect(() => {
+    // Set initial scroll position
+    handleScroll();
+
+    if (ref?.current) {
+      // Listen to element scroll
+      const target = ref.current;
+      target.addEventListener("scroll", handleScroll);
+      return () => {
+        target.removeEventListener("scroll", handleScroll);
+      };
+    } else if (typeof window !== "undefined") {
+      // Listen to window scroll
+      window.addEventListener("scroll", handleScroll);
+      return () => {
+        window.removeEventListener("scroll", handleScroll);
+      };
+    }
+  }, [ref, handleScroll]);
+
+  return scroll;
+}
+`, useScroll_test: `import { act, renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { useScroll } from "./useScroll.js";
+
+describe("useScroll", () => {
+  it("should initialize with zero scroll position", () => {
+    const { result } = renderHook(() => useScroll());
+    expect(result.current).toEqual({ x: 0, y: 0 });
+  });
+
+  it("should update on window scroll", async () => {
+    const { result } = renderHook(() => useScroll());
+
+    act(() => {
+      Object.defineProperty(window, "scrollX", {
+        value: 100,
+        writable: true,
+      });
+      Object.defineProperty(window, "scrollY", {
+        value: 200,
+        writable: true,
+      });
+      const scrollEvent = new Event("scroll");
+      window.dispatchEvent(scrollEvent);
+    });
+
+    await waitFor(() => {
+      expect(result.current.x).toBe(100);
+      expect(result.current.y).toBe(200);
+    });
+  });
+
+  it("should track element scroll when ref is provided", () => {
+    const mockElement = {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      scrollLeft: 50,
+      scrollTop: 100,
+    } as unknown as HTMLElement;
+
+    const ref = { current: mockElement };
+    const { result } = renderHook(() => useScroll(ref));
+
+    expect(typeof result.current).toBe("object");
+    expect("x" in result.current && "y" in result.current).toBe(true);
+  });
+
+  it("should clean up event listener on unmount", () => {
+    const removeEventListenerSpy = vi.spyOn(window, "removeEventListener");
+    const { unmount } = renderHook(() => useScroll());
+
+    unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      "scroll",
+      expect.any(Function),
+    );
+
+    removeEventListenerSpy.mockRestore();
+  });
+});
+`,
+    useSessionStorage: `import { useCallback, useState } from "react";
+
+/**
+ * Syncs state with sessionStorage, persisting only for the current session.
+ *
+ * @param key - The sessionStorage key
+ * @param initialValue - The initial value (used if no stored value exists)
+ * @returns A tuple of [value, setValue, removeValue]
+ *
+ * @example
+ * const [sessionData, setSessionData, removeSessionData] = useSessionStorage("session", "default");
+ *
+ * // Update the session data (automatically persisted)
+ * setSessionData("newData");
+ *
+ * // Remove from sessionStorage
+ * removeSessionData();
+ */
+export function useSessionStorage<T>(
+  key: string,
+  initialValue: T,
+): [T, (value: ((prev: T) => T) | T) => void, () => void] {
+  // Get initial value from sessionStorage or use provided initial value
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === "undefined") {
+      return initialValue;
+    }
+
+    try {
+      const item = window.sessionStorage.getItem(key);
+      return item ? (JSON.parse(item) as T) : initialValue;
+    } catch (error) {
+      console.warn(\`Error reading sessionStorage key "\${key}":\`, error);
+      return initialValue;
+    }
+  });
+
+  // Update sessionStorage when value changes
+  const setValue = useCallback(
+    (value: ((prev: T) => T) | T) => {
+      try {
+        setStoredValue((prev) => {
+          const valueToStore = value instanceof Function ? value(prev) : value;
+          if (typeof window !== "undefined") {
+            window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
+          }
+          return valueToStore;
+        });
+      } catch (error) {
+        console.warn(\`Error setting sessionStorage key "\${key}":\`, error);
+      }
+    },
+    [key],
+  );
+
+  // Remove from sessionStorage
+  const removeValue = useCallback(() => {
+    try {
+      if (typeof window !== "undefined") {
+        window.sessionStorage.removeItem(key);
+      }
+      setStoredValue(initialValue);
+    } catch (error) {
+      console.warn(\`Error removing sessionStorage key "\${key}":\`, error);
+    }
+  }, [key, initialValue]);
+
+  return [storedValue, setValue, removeValue];
+}
+`, useSessionStorage_test: `import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { useSessionStorage } from "./useSessionStorage.js";
+
+describe("useSessionStorage", () => {
+  beforeEach(() => {
+    sessionStorage.clear();
+  });
+
+  afterEach(() => {
+    sessionStorage.clear();
+  });
+
+  it("should initialize with initial value", () => {
+    const { result } = renderHook(() => useSessionStorage("test", "initial"));
+    expect(result.current[0]).toBe("initial");
+  });
+
+  it("should read from sessionStorage if key exists", () => {
+    sessionStorage.setItem("test", JSON.stringify("stored"));
+    const { result } = renderHook(() => useSessionStorage("test", "initial"));
+    expect(result.current[0]).toBe("stored");
+  });
+
+  it("should update sessionStorage when value changes", () => {
+    const { result } = renderHook(() => useSessionStorage("test", "initial"));
+
+    act(() => {
+      result.current[1]("updated");
+    });
+
+    expect(result.current[0]).toBe("updated");
+    expect(sessionStorage.getItem("test")).toBe(JSON.stringify("updated"));
+  });
+
+  it("should support updater function", () => {
+    const { result } = renderHook(() => useSessionStorage("test", 0));
+
+    act(() => {
+      result.current[1]((prev) => prev + 1);
+    });
+
+    expect(result.current[0]).toBe(1);
+  });
+
+  it("should remove value from sessionStorage", () => {
+    sessionStorage.setItem("test", JSON.stringify("value"));
+    const { result } = renderHook(() => useSessionStorage("test", "initial"));
+
+    act(() => {
+      result.current[2]();
+    });
+
+    expect(result.current[0]).toBe("initial");
+    expect(sessionStorage.getItem("test")).toBeNull();
+  });
+
+  it("should handle complex objects", () => {
+    const obj = { name: "test", value: 42 };
+    const { result } = renderHook(() => useSessionStorage("test", obj));
+
+    act(() => {
+      result.current[1]({ name: "updated", value: 100 });
+    });
+
+    expect(result.current[0]).toEqual({ name: "updated", value: 100 });
+    expect(JSON.parse(sessionStorage.getItem("test") ?? "{}")).toEqual({
+      name: "updated",
+      value: 100,
+    });
+  });
+
+  it("should handle parse errors gracefully", () => {
+    sessionStorage.setItem("test", "invalid json");
+    const { result } = renderHook(() => useSessionStorage("test", "fallback"));
+    expect(result.current[0]).toBe("fallback");
+  });
+});
+`,
+    useThrottle: `import { useEffect, useRef, useState } from "react";
+
+/**
+ * Throttles a value to update at most once per specified interval.
+ *
+ * @param value - The value to throttle
+ * @param interval - The throttle interval in milliseconds (default: 500ms)
+ * @returns The throttled value
+ *
+ * @example
+ * const [position, setPosition] = useState({ x: 0, y: 0 });
+ * const throttledPosition = useThrottle(position, 100);
+ *
+ * useEffect(() => {
+ *   // This effect runs at most every 100ms
+ *   updateCursor(throttledPosition);
+ * }, [throttledPosition]);
+ */
+export function useThrottle<T>(value: T, interval = 500): T {
+  const [throttledValue, setThrottledValue] = useState<T>(value);
+  // eslint-disable-next-line react-hooks/purity
+  const lastUpdated = useRef<number>(Date.now());
+
+  useEffect(() => {
+    const now = Date.now();
+    const elapsed = now - lastUpdated.current;
+
+    if (elapsed >= interval) {
+      lastUpdated.current = now;
+      setThrottledValue(value);
+    } else {
+      const timer = setTimeout(() => {
+        lastUpdated.current = Date.now();
+        setThrottledValue(value);
+      }, interval - elapsed);
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [value, interval]);
+
+  return throttledValue;
+}
+`, useThrottle_test: `import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useThrottle } from "./useThrottle.js";
+
+describe("useThrottle", () => {
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should return initial value immediately", () => {
+    const { result } = renderHook(() => useThrottle("initial", 500));
+    expect(result.current).toBe("initial");
+  });
+
+  it("should throttle rapid updates", () => {
+    const { rerender, result } = renderHook(
+      ({ value }) => useThrottle(value, 500),
+      { initialProps: { value: "a" } },
+    );
+
+    expect(result.current).toBe("a");
+
+    rerender({ value: "b" });
+    expect(result.current).toBe("a");
+
+    rerender({ value: "c" });
+    expect(result.current).toBe("a");
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(result.current).toBe("c");
+  });
+
+  it("should allow updates after interval passes", () => {
+    const { rerender, result } = renderHook(
+      ({ value }) => useThrottle(value, 500),
+      { initialProps: { value: "a" } },
+    );
+
+    expect(result.current).toBe("a");
+
+    rerender({ value: "b" });
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(result.current).toBe("b");
+
+    rerender({ value: "c" });
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(result.current).toBe("c");
+  });
+
+  it("should use default interval of 500ms", () => {
+    const { rerender, result } = renderHook(({ value }) => useThrottle(value), {
+      initialProps: { value: "initial" },
+    });
+
+    rerender({ value: "updated" });
+
+    act(() => {
+      vi.advanceTimersByTime(499);
+    });
+    expect(result.current).toBe("initial");
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(result.current).toBe("updated");
+  });
+
+  it("should cleanup timer on unmount when throttle pending", () => {
+    const { rerender, unmount } = renderHook(
+      ({ value }) => useThrottle(value, 500),
+      { initialProps: { value: "a" } },
+    );
+
+    rerender({ value: "b" });
+    unmount();
+    expect(true).toBe(true);
+  });
+});
+`,
+    useThrottledCallback: `import { useCallback, useEffect, useRef } from "react";
+
+export interface ThrottledCallbackOptions {
+  /**
+   * Whether to invoke the callback on the leading edge (immediately on first call).
+   * @default true
+   */
+  leading?: boolean;
+  /**
+   * Whether to invoke the callback on the trailing edge (after the interval).
+   * @default true
+   */
+  trailing?: boolean;
+}
+
+/**
+ * Creates a throttled version of a callback function.
+ * The callback will execute at most once per specified interval.
+ *
+ * @param callback - The function to throttle
+ * @param interval - The throttle interval in milliseconds (default: 500ms)
+ * @param options - Configuration options for leading/trailing edge behavior
+ * @returns A tuple containing [throttledCallback, cancel]
+ *
+ * @example
+ * const [throttledScroll, cancel] = useThrottledCallback((e: Event) => {
+ *   console.log("Scroll position:", window.scrollY);
+ * }, 100);
+ *
+ * useEffect(() => {
+ *   window.addEventListener("scroll", throttledScroll);
+ *   return () => window.removeEventListener("scroll", throttledScroll);
+ * }, [throttledScroll]);
+ *
+ * @example
+ * // Trailing edge only (no immediate execution)
+ * const [throttled] = useThrottledCallback(callback, 500, { leading: false });
+ */
+export function useThrottledCallback<T extends unknown[]>(
+  callback: (...args: T) => void,
+  interval = 500,
+  options: ThrottledCallbackOptions = {},
+): [(...args: T) => void, () => void] {
+  const { leading = true, trailing = true } = options;
+
+  const callbackRef = useRef(callback);
+  const timeoutRef = useRef<null | ReturnType<typeof setTimeout>>(null);
+  const lastArgsRef = useRef<null | T>(null);
+  const lastCallTimeRef = useRef<null | number>(null);
+
+  // Keep callback ref up to date
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const cancel = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    lastArgsRef.current = null;
+    lastCallTimeRef.current = null;
+  }, []);
+
+  const throttledCallback = useCallback(
+    (...args: T) => {
+      const now = Date.now();
+      const timeSinceLastCall =
+        lastCallTimeRef.current === null
+          ? interval
+          : now - lastCallTimeRef.current;
+
+      lastArgsRef.current = args;
+
+      // First call or enough time has passed
+      if (timeSinceLastCall >= interval) {
+        if (leading) {
+          lastCallTimeRef.current = now;
+          callbackRef.current(...args);
+        } else {
+          // Schedule for trailing edge
+          lastCallTimeRef.current = now;
+          if (trailing && !timeoutRef.current) {
+            timeoutRef.current = setTimeout(() => {
+              timeoutRef.current = null;
+              if (lastArgsRef.current) {
+                callbackRef.current(...lastArgsRef.current);
+              }
+            }, interval);
+          }
+        }
+      } else if (trailing && !timeoutRef.current) {
+        // Schedule trailing call
+        const remainingTime = interval - timeSinceLastCall;
+        timeoutRef.current = setTimeout(() => {
+          timeoutRef.current = null;
+          lastCallTimeRef.current = Date.now();
+          if (lastArgsRef.current) {
+            callbackRef.current(...lastArgsRef.current);
+          }
+        }, remainingTime);
+      }
+    },
+    [interval, leading, trailing],
+  );
+
+  return [throttledCallback, cancel];
+}
+`, useThrottledCallback_test: `import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useThrottledCallback } from "./useThrottledCallback.js";
+
+describe("useThrottledCallback", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  it("should execute immediately on first call (leading edge)", () => {
+    const callback = vi.fn();
+    const { result } = renderHook(() => useThrottledCallback(callback, 500));
+
+    const [throttledCallback] = result.current;
+
+    act(() => {
+      throttledCallback("first");
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith("first");
+  });
+
+  it("should throttle subsequent calls within interval", () => {
+    const callback = vi.fn();
+    const { result } = renderHook(() => useThrottledCallback(callback, 500));
+
+    const [throttledCallback] = result.current;
+
+    act(() => {
+      throttledCallback("a");
+      throttledCallback("b");
+      throttledCallback("c");
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith("a");
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    // Trailing call with last args
+    expect(callback).toHaveBeenCalledTimes(2);
+    expect(callback).toHaveBeenLastCalledWith("c");
+  });
+
+  it("should use default interval of 500ms", () => {
+    const callback = vi.fn();
+    const { result } = renderHook(() => useThrottledCallback(callback));
+
+    const [throttledCallback] = result.current;
+
+    act(() => {
+      throttledCallback("first");
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      throttledCallback("second");
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(499);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+
+  it("should allow calls after interval has passed", () => {
+    const callback = vi.fn();
+    const { result } = renderHook(() => useThrottledCallback(callback, 500));
+
+    const [throttledCallback] = result.current;
+
+    act(() => {
+      throttledCallback("first");
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    act(() => {
+      throttledCallback("second");
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+    expect(callback).toHaveBeenLastCalledWith("second");
+  });
+
+  it("should cancel pending callback", () => {
+    const callback = vi.fn();
+    const { result } = renderHook(() => useThrottledCallback(callback, 500));
+
+    const [throttledCallback, cancel] = result.current;
+
+    act(() => {
+      throttledCallback("first");
+      throttledCallback("second");
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      cancel();
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    // Trailing call was cancelled
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should pass all arguments to callback", () => {
+    const callback = vi.fn();
+    const { result } = renderHook(() => useThrottledCallback(callback, 100));
+
+    const [throttledCallback] = result.current;
+
+    act(() => {
+      throttledCallback("arg1", "arg2", 123);
+    });
+
+    expect(callback).toHaveBeenCalledWith("arg1", "arg2", 123);
+  });
+
+  it("should use latest callback reference", () => {
+    const callback1 = vi.fn();
+    const callback2 = vi.fn();
+
+    const { rerender, result } = renderHook(
+      ({ cb }) => useThrottledCallback(cb, 500),
+      { initialProps: { cb: callback1 } },
+    );
+
+    const [throttledCallback] = result.current;
+
+    act(() => {
+      throttledCallback("first");
+      throttledCallback("second");
+    });
+
+    expect(callback1).toHaveBeenCalledTimes(1);
+
+    rerender({ cb: callback2 });
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    // Trailing call uses new callback
+    expect(callback1).toHaveBeenCalledTimes(1);
+    expect(callback2).toHaveBeenCalledTimes(1);
+  });
+
+  it("should cleanup on unmount", () => {
+    const callback = vi.fn();
+    const { result, unmount } = renderHook(() =>
+      useThrottledCallback(callback, 500),
+    );
+
+    const [throttledCallback] = result.current;
+
+    act(() => {
+      throttledCallback("first");
+      throttledCallback("second");
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    unmount();
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    // Trailing call was cleaned up
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  describe("options", () => {
+    it("should not execute immediately when leading is false", () => {
+      const callback = vi.fn();
+      const { result } = renderHook(() =>
+        useThrottledCallback(callback, 500, { leading: false }),
+      );
+
+      const [throttledCallback] = result.current;
+
+      act(() => {
+        throttledCallback("first");
+      });
+
+      expect(callback).not.toHaveBeenCalled();
+
+      act(() => {
+        vi.advanceTimersByTime(500);
+      });
+
+      expect(callback).toHaveBeenCalledTimes(1);
+      expect(callback).toHaveBeenCalledWith("first");
+    });
+
+    it("should not execute trailing call when trailing is false", () => {
+      const callback = vi.fn();
+      const { result } = renderHook(() =>
+        useThrottledCallback(callback, 500, { trailing: false }),
+      );
+
+      const [throttledCallback] = result.current;
+
+      act(() => {
+        throttledCallback("first");
+        throttledCallback("second");
+        throttledCallback("third");
+      });
+
+      expect(callback).toHaveBeenCalledTimes(1);
+      expect(callback).toHaveBeenCalledWith("first");
+
+      act(() => {
+        vi.advanceTimersByTime(500);
+      });
+
+      // No trailing call
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it("should handle both leading and trailing as false gracefully", () => {
+      const callback = vi.fn();
+      const { result } = renderHook(() =>
+        useThrottledCallback(callback, 500, {
+          leading: false,
+          trailing: false,
+        }),
+      );
+
+      const [throttledCallback] = result.current;
+
+      act(() => {
+        throttledCallback("test");
+      });
+
+      act(() => {
+        vi.advanceTimersByTime(1000);
+      });
+
+      // No calls when both are false
+      expect(callback).not.toHaveBeenCalled();
+    });
+  });
+});
+`,
+    useTimeout: `import { useEffect } from "react";
+
+/**
+ * Calls a callback after a timeout.
+ *
+ * @param callback - Function to call after timeout
+ * @param delay - Timeout delay in milliseconds (null to disable)
+ *
+ * @example
+ * useTimeout(() => {
+ *   console.log("Timeout completed");
+ * }, 2000);
+ *
+ * @example
+ * // Disable timeout by passing null
+ * useTimeout(() => {
+ *   console.log("This won't run");
+ * }, null);
+ */
+export function useTimeout(callback: () => void, delay: null | number): void {
+  useEffect(() => {
+    if (delay === null) return;
+
+    const timeout = setTimeout(callback, delay);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [callback, delay]);
+}
+`, useTimeout_test: `import { renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useTimeout } from "./useTimeout.js";
+
+describe("useTimeout", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should call callback after timeout", () => {
+    const callback = vi.fn();
+    renderHook(() => {
+      useTimeout(callback, 2000);
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(2000);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should cleanup timeout on unmount", () => {
+    const callback = vi.fn();
+    const { unmount } = renderHook(() => {
+      useTimeout(callback, 2000);
+    });
+
+    unmount();
+
+    vi.advanceTimersByTime(2000);
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("should not set timeout when delay is null", () => {
+    const callback = vi.fn();
+    renderHook(() => {
+      useTimeout(callback, null);
+    });
+
+    vi.advanceTimersByTime(5000);
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("should reset timeout when delay changes", () => {
+    const callback = vi.fn();
+    const { rerender } = renderHook(
+      ({ delay }: { delay: null | number }) => {
+        useTimeout(callback, delay);
+      },
+      { initialProps: { delay: 2000 as null | number } },
+    );
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).not.toHaveBeenCalled();
+
+    // Change delay, should reset the timeout
+    rerender({ delay: 3000 });
+
+    vi.advanceTimersByTime(2000);
+    expect(callback).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});
+`,
+    useToggle: `import { useCallback, useState } from "react";
+
+/**
+ * Toggle a boolean value with a callback.
+ *
+ * @param initialValue - Initial boolean value (default: false)
+ * @returns Tuple of [value, toggle, setValue]
+ *
+ * @example
+ * const [isOpen, toggle] = useToggle(false);
+ *
+ * return (
+ *   <>
+ *     <button onClick={toggle}>Toggle</button>
+ *     {isOpen && <div>Content</div>}
+ *   </>
+ * );
+ */
+export function useToggle(
+  initialValue = false,
+): [boolean, () => void, (value: boolean) => void] {
+  const [value, setValue] = useState(initialValue);
+
+  const toggle = useCallback(() => {
+    setValue((prev) => !prev);
+  }, []);
+
+  return [value, toggle, setValue];
+}
+`, useToggle_test: `import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { useToggle } from "./useToggle.js";
+
+describe("useToggle", () => {
+  it("should initialize with false by default", () => {
+    const { result } = renderHook(() => useToggle());
+    expect(result.current[0]).toBe(false);
+  });
+
+  it("should initialize with provided value", () => {
+    const { result } = renderHook(() => useToggle(true));
+    expect(result.current[0]).toBe(true);
+  });
+
+  it("should toggle value", () => {
+    const { result } = renderHook(() => useToggle());
+
+    act(() => {
+      result.current[1]();
+    });
+    expect(result.current[0]).toBe(true);
+
+    act(() => {
+      result.current[1]();
+    });
+    expect(result.current[0]).toBe(false);
+  });
+
+  it("should set value directly", () => {
+    const { result } = renderHook(() => useToggle());
+
+    act(() => {
+      result.current[2](true);
+    });
+    expect(result.current[0]).toBe(true);
+
+    act(() => {
+      result.current[2](false);
+    });
+    expect(result.current[0]).toBe(false);
+  });
+});
+`,
+    useUnmount: `import { useEffect, useRef } from "react";
+
+/**
+ * Calls a callback on component unmount.
+ *
+ * @param callback - Function to call on unmount
+ *
+ * @example
+ * useUnmount(() => {
+ *   console.log("Component unmounting");
+ *   // Cleanup resources
+ * });
+ */
+export function useUnmount(callback: () => void): void {
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    return () => {
+      callbackRef.current();
+    };
+  }, []);
+}
+`, useUnmount_test: `import { renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { useUnmount } from "./useUnmount.js";
+
+describe("useUnmount", () => {
+  it("should call callback on unmount", () => {
+    const callback = vi.fn();
+    const { unmount } = renderHook(() => {
+      useUnmount(callback);
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+
+    unmount();
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not call callback on rerender", () => {
+    const callback = vi.fn();
+    const { rerender } = renderHook(() => {
+      useUnmount(callback);
+    });
+
+    rerender();
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("should use latest callback on unmount", () => {
+    const callback1 = vi.fn();
+    const callback2 = vi.fn();
+
+    const { rerender, unmount } = renderHook(
+      ({ cb }: { cb: () => void }) => {
+        useUnmount(cb);
+      },
+      { initialProps: { cb: callback1 } },
+    );
+
+    rerender({ cb: callback2 });
+    unmount();
+
+    expect(callback1).not.toHaveBeenCalled();
+    expect(callback2).toHaveBeenCalledTimes(1);
+  });
+});
+`,
+    useWindowSize: `import { useEffect, useState } from "react";
+
+interface WindowSize {
+  height: number | undefined;
+  width: number | undefined;
+}
+
+/**
+ * Tracks window dimensions.
+ *
+ * @returns Object with width and height of the window
+ *
+ * @example
+ * const { width, height } = useWindowSize();
+ *
+ * return (
+ *   <div>
+ *     Window size: {width}x{height}
+ *   </div>
+ * );
+ */
+export function useWindowSize(): WindowSize {
+  const [windowSize, setWindowSize] = useState<WindowSize>({
+    height: undefined,
+    width: undefined,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        height: window.innerHeight,
+        width: window.innerWidth,
+      });
+    };
+
+    // Call once on mount
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return windowSize;
+}
+`, useWindowSize_test: `import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useWindowSize } from "./useWindowSize.js";
+
+describe("useWindowSize", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      value: 1024,
+      writable: true,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      value: 768,
+      writable: true,
+    });
+  });
+
+  it("should return window size", () => {
+    const { result } = renderHook(() => useWindowSize());
+
+    expect(result.current.width).toBe(1024);
+    expect(result.current.height).toBe(768);
+  });
+
+  it("should update on resize", () => {
+    const { result } = renderHook(() => useWindowSize());
+
+    expect(result.current.width).toBe(1024);
+
+    Object.defineProperty(window, "innerWidth", { value: 800, writable: true });
+    Object.defineProperty(window, "innerHeight", {
+      value: 600,
+      writable: true,
+    });
+
+    act(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
+
+    expect(result.current.width).toBe(800);
+    expect(result.current.height).toBe(600);
+  });
+
+  it("should cleanup listener on unmount", () => {
+    const removeSpy = vi.spyOn(window, "removeEventListener");
+    const { unmount } = renderHook(() => useWindowSize());
+
+    unmount();
+
+    expect(removeSpy).toHaveBeenCalledWith("resize", expect.any(Function));
+  });
+});
+`,
+};
+//# sourceMappingURL=hook-templates.js.map