Merge commit 'd803bfe2b1fe7f5e219e50ac20d6801a0a58ac75' as 'vendor/ruvector'

vendor/ruvector/examples/edge-net/dashboard/src/hooks/useMediaQuery.ts

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+
+    // Set initial value
+    setMatches(media.matches);
+
+    // Create listener
+    const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
+
+    // Add listener
+    media.addEventListener('change', listener);
+
+    // Cleanup
+    return () => media.removeEventListener('change', listener);
+  }, [query]);
+
+  return matches;
+}
+
+// Convenience hooks for common breakpoints
+export function useIsMobile() {
+  return useMediaQuery('(max-width: 768px)');
+}
+
+export function useIsTablet() {
+  return useMediaQuery('(min-width: 769px) and (max-width: 1024px)');
+}
+
+export function useIsDesktop() {
+  return useMediaQuery('(min-width: 1025px)');
+}
+
+export function usePrefersDarkMode() {
+  return useMediaQuery('(prefers-color-scheme: dark)');
+}
+
+export function usePrefersReducedMotion() {
+  return useMediaQuery('(prefers-reduced-motion: reduce)');
+}