@bquery/bquery 1.7.0 → 1.8.2

package/src/media/index.ts

@@ -1,76 +1,76 @@
-/**
- * bQuery Media module — reactive browser and device API signals.
- *
- * Provides reactive wrappers around browser media queries, viewport,
- * network status, battery, geolocation, device sensors, and clipboard.
- *
- * @module bquery/media
- *
- * @example
- * ```ts
- * import { mediaQuery, breakpoints, useViewport, useNetworkStatus, clipboard } from '@bquery/bquery/media';
- * import { effect } from '@bquery/bquery/reactive';
- *
- * // Reactive media query
- * const isDark = mediaQuery('(prefers-color-scheme: dark)');
- *
- * // Named breakpoints
- * const bp = breakpoints({ sm: 640, md: 768, lg: 1024, xl: 1280 });
- *
- * // Viewport tracking
- * const viewport = useViewport();
- * effect(() => console.log(viewport.value.width));
- *
- * // Network status
- * const net = useNetworkStatus();
- * effect(() => console.log('Online:', net.value.online));
- *
- * // Clipboard
- * await clipboard.write('Hello!');
- * const text = await clipboard.read();
- * ```
- */
-
-// Media query
-export { mediaQuery } from './media-query';
-
-// Breakpoints
-export { breakpoints } from './breakpoints';
-
-// Viewport
-export { useViewport } from './viewport';
-
-// Network
-export { useNetworkStatus } from './network';
-
-// Battery
-export { useBattery } from './battery';
-
-// Geolocation
-export { useGeolocation } from './geolocation';
-
-// Device sensors
-export { useDeviceMotion, useDeviceOrientation } from './device-sensors';
-
-// Clipboard
-export { clipboard } from './clipboard';
-
-// Types
-export type {
-  BatterySignal,
-  BatteryState,
-  BreakpointMap,
-  ClipboardAPI,
-  DeviceMotionSignal,
-  DeviceMotionState,
-  DeviceOrientationSignal,
-  DeviceOrientationState,
-  GeolocationOptions,
-  GeolocationSignal,
-  GeolocationState,
-  MediaSignalHandle,
-  NetworkSignal,
-  NetworkState,
-  ViewportSignal,
-  ViewportState,
-} from './types';
+/**
+ * bQuery Media module — reactive browser and device API signals.
+ *
+ * Provides reactive wrappers around browser media queries, viewport,
+ * network status, battery, geolocation, device sensors, and clipboard.
+ *
+ * @module bquery/media
+ *
+ * @example
+ * ```ts
+ * import { mediaQuery, breakpoints, useViewport, useNetworkStatus, clipboard } from '@bquery/bquery/media';
+ * import { effect } from '@bquery/bquery/reactive';
+ *
+ * // Reactive media query
+ * const isDark = mediaQuery('(prefers-color-scheme: dark)');
+ *
+ * // Named breakpoints
+ * const bp = breakpoints({ sm: 640, md: 768, lg: 1024, xl: 1280 });
+ *
+ * // Viewport tracking
+ * const viewport = useViewport();
+ * effect(() => console.log(viewport.value.width));
+ *
+ * // Network status
+ * const net = useNetworkStatus();
+ * effect(() => console.log('Online:', net.value.online));
+ *
+ * // Clipboard
+ * await clipboard.write('Hello!');
+ * const text = await clipboard.read();
+ * ```
+ */
+
+// Media query
+export { mediaQuery } from './media-query';
+
+// Breakpoints
+export { breakpoints } from './breakpoints';
+
+// Viewport
+export { useViewport } from './viewport';
+
+// Network
+export { useNetworkStatus } from './network';
+
+// Battery
+export { useBattery } from './battery';
+
+// Geolocation
+export { useGeolocation } from './geolocation';
+
+// Device sensors
+export { useDeviceMotion, useDeviceOrientation } from './device-sensors';
+
+// Clipboard
+export { clipboard } from './clipboard';
+
+// Types
+export type {
+  BatterySignal,
+  BatteryState,
+  BreakpointMap,
+  ClipboardAPI,
+  DeviceMotionSignal,
+  DeviceMotionState,
+  DeviceOrientationSignal,
+  DeviceOrientationState,
+  GeolocationOptions,
+  GeolocationSignal,
+  GeolocationState,
+  MediaSignalHandle,
+  NetworkSignal,
+  NetworkState,
+  ViewportSignal,
+  ViewportState,
+} from './types';

package/src/media/media-query.ts

@@ -1,92 +1,92 @@
-/**
- * Reactive media query matching.
- *
- * Returns a reactive boolean signal that tracks whether a CSS media query matches.
- *
- * @module bquery/media
- */
-
-import { readonly, signal } from '../reactive/index';
-import type { MediaSignalHandle } from './types';
-
-/**
- * Creates a reactive signal that tracks whether a CSS media query matches.
- *
- * Uses `window.matchMedia()` under the hood and automatically updates
- * when the match state changes (e.g., on window resize, device orientation change).
- *
- * @param query - A valid CSS media query string (e.g., `'(min-width: 768px)'`)
- * @returns A readonly reactive signal that is `true` when the query matches,
- * plus a `destroy()` method to remove the media query listener
- *
- * @example
- * ```ts
- * import { mediaQuery } from '@bquery/bquery/media';
- * import { effect } from '@bquery/bquery/reactive';
- *
- * const isDark = mediaQuery('(prefers-color-scheme: dark)');
- * effect(() => {
- *   document.body.classList.toggle('dark', isDark.value);
- * });
- *
- * const isWide = mediaQuery('(min-width: 1024px)');
- * effect(() => {
- *   console.log('Wide screen:', isWide.value);
- * });
- * ```
- */
-export const mediaQuery = (query: string): MediaSignalHandle<boolean> => {
-  const s = signal(false);
-  let cleanup: (() => void) | undefined;
-
-  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
-    try {
-      const mql = window.matchMedia(query);
-      s.value = mql.matches;
-
-      const handler = (e: MediaQueryListEvent): void => {
-        s.value = e.matches;
-      };
-
-      if (typeof mql.addEventListener === 'function') {
-        mql.addEventListener('change', handler);
-        cleanup = () => {
-          mql.removeEventListener('change', handler);
-        };
-      } else if (
-        typeof (
-          mql as MediaQueryList & {
-            addListener?: (listener: (event: MediaQueryListEvent) => void) => void;
-            removeListener?: (listener: (event: MediaQueryListEvent) => void) => void;
-          }
-        ).addListener === 'function'
-      ) {
-        const legacyMql = mql as MediaQueryList & {
-          addListener: (listener: (event: MediaQueryListEvent) => void) => void;
-          removeListener: (listener: (event: MediaQueryListEvent) => void) => void;
-        };
-        legacyMql.addListener(handler);
-        cleanup = () => {
-          legacyMql.removeListener(handler);
-        };
-      }
-    } catch {
-      // matchMedia may throw in non-browser environments
-    }
-  }
-
-  const ro = readonly(s) as MediaSignalHandle<boolean>;
-  let destroyed = false;
-  Object.defineProperty(ro, 'destroy', {
-    enumerable: false,
-    configurable: true,
-    value(): void {
-      if (destroyed) return;
-      destroyed = true;
-      cleanup?.();
-      s.dispose();
-    },
-  });
-
-  return ro;
-};
+/**
+ * Reactive media query matching.
+ *
+ * Returns a reactive boolean signal that tracks whether a CSS media query matches.
+ *
+ * @module bquery/media
+ */
+
+import { readonly, signal } from '../reactive/index';
+import type { MediaSignalHandle } from './types';
+
+/**
+ * Creates a reactive signal that tracks whether a CSS media query matches.
+ *
+ * Uses `window.matchMedia()` under the hood and automatically updates
+ * when the match state changes (e.g., on window resize, device orientation change).
+ *
+ * @param query - A valid CSS media query string (e.g., `'(min-width: 768px)'`)
+ * @returns A readonly reactive signal that is `true` when the query matches,
+ * plus a `destroy()` method to remove the media query listener
+ *
+ * @example
+ * ```ts
+ * import { mediaQuery } from '@bquery/bquery/media';
+ * import { effect } from '@bquery/bquery/reactive';
+ *
+ * const isDark = mediaQuery('(prefers-color-scheme: dark)');
+ * effect(() => {
+ *   document.body.classList.toggle('dark', isDark.value);
+ * });
+ *
+ * const isWide = mediaQuery('(min-width: 1024px)');
+ * effect(() => {
+ *   console.log('Wide screen:', isWide.value);
+ * });
+ * ```
+ */
+export const mediaQuery = (query: string): MediaSignalHandle<boolean> => {
+  const s = signal(false);
+  let cleanup: (() => void) | undefined;
+
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+    try {
+      const mql = window.matchMedia(query);
+      s.value = mql.matches;
+
+      const handler = (e: MediaQueryListEvent): void => {
+        s.value = e.matches;
+      };
+
+      if (typeof mql.addEventListener === 'function') {
+        mql.addEventListener('change', handler);
+        cleanup = () => {
+          mql.removeEventListener('change', handler);
+        };
+      } else if (
+        typeof (
+          mql as MediaQueryList & {
+            addListener?: (listener: (event: MediaQueryListEvent) => void) => void;
+            removeListener?: (listener: (event: MediaQueryListEvent) => void) => void;
+          }
+        ).addListener === 'function'
+      ) {
+        const legacyMql = mql as MediaQueryList & {
+          addListener: (listener: (event: MediaQueryListEvent) => void) => void;
+          removeListener: (listener: (event: MediaQueryListEvent) => void) => void;
+        };
+        legacyMql.addListener(handler);
+        cleanup = () => {
+          legacyMql.removeListener(handler);
+        };
+      }
+    } catch {
+      // matchMedia may throw in non-browser environments
+    }
+  }
+
+  const ro = readonly(s) as MediaSignalHandle<boolean>;
+  let destroyed = false;
+  Object.defineProperty(ro, 'destroy', {
+    enumerable: false,
+    configurable: true,
+    value(): void {
+      if (destroyed) return;
+      destroyed = true;
+      cleanup?.();
+      s.dispose();
+    },
+  });
+
+  return ro;
+};

package/src/media/network.ts

@@ -1,115 +1,115 @@
-/**
- * Reactive network status.
- *
- * Provides a reactive signal tracking the browser's network connectivity
- * and connection quality via the Network Information API.
- *
- * @module bquery/media
- */
-
-import { readonly, signal } from '../reactive/index';
-import type { NetworkSignal, NetworkState } from './types';
-
-/**
- * Navigator connection interface for the Network Information API.
- * @internal
- */
-interface NavigatorConnection extends EventTarget {
-  effectiveType?: string;
-  downlink?: number;
-  rtt?: number;
-}
-
-/**
- * Extended Navigator with connection property.
- * @internal
- */
-interface NavigatorWithConnection extends Navigator {
-  connection?: NavigatorConnection;
-}
-
-/**
- * Reads current network state from browser APIs.
- * @internal
- */
-const getNetworkState = (): NetworkState => {
-  const online =
-    typeof navigator !== 'undefined' && navigator.onLine !== undefined ? navigator.onLine : true;
-
-  const nav = typeof navigator !== 'undefined' ? (navigator as NavigatorWithConnection) : undefined;
-  const conn = nav?.connection;
-
-  return {
-    online,
-    effectiveType: conn?.effectiveType ?? 'unknown',
-    downlink: conn?.downlink ?? 0,
-    rtt: conn?.rtt ?? 0,
-  };
-};
-
-/**
- * Returns a reactive signal tracking network connectivity and quality.
- *
- * Tracks whether the browser is online/offline and, where supported,
- * the effective connection type, downlink speed, and round-trip time
- * via the Network Information API.
- *
- * @returns A readonly reactive signal with `{ online, effectiveType, downlink, rtt }`
- * and a `destroy()` method to remove attached listeners
- *
- * @example
- * ```ts
- * import { useNetworkStatus } from '@bquery/bquery/media';
- * import { effect } from '@bquery/bquery/reactive';
- *
- * const net = useNetworkStatus();
- * effect(() => {
- *   if (!net.value.online) {
- *     console.warn('You are offline!');
- *   }
- *   console.log(`Connection: ${net.value.effectiveType}, RTT: ${net.value.rtt}ms`);
- * });
- * ```
- */
-export const useNetworkStatus = (): NetworkSignal => {
-  const s = signal<NetworkState>(getNetworkState());
-  let cleanup: (() => void) | undefined;
-
-  if (typeof window !== 'undefined') {
-    const update = (): void => {
-      s.value = getNetworkState();
-    };
-
-    window.addEventListener('online', update);
-    window.addEventListener('offline', update);
-
-    const nav =
-      typeof navigator !== 'undefined' ? (navigator as NavigatorWithConnection) : undefined;
-    if (nav?.connection && typeof nav.connection.addEventListener === 'function') {
-      nav.connection.addEventListener('change', update);
-    }
-
-    cleanup = () => {
-      window.removeEventListener('online', update);
-      window.removeEventListener('offline', update);
-      if (nav?.connection && typeof nav.connection.removeEventListener === 'function') {
-        nav.connection.removeEventListener('change', update);
-      }
-    };
-  }
-
-  const ro = readonly(s) as NetworkSignal;
-  let destroyed = false;
-  Object.defineProperty(ro, 'destroy', {
-    value(): void {
-      if (destroyed) return;
-      destroyed = true;
-      cleanup?.();
-      s.dispose();
-    },
-    enumerable: false,
-    configurable: true,
-  });
-
-  return ro;
-};
+/**
+ * Reactive network status.
+ *
+ * Provides a reactive signal tracking the browser's network connectivity
+ * and connection quality via the Network Information API.
+ *
+ * @module bquery/media
+ */
+
+import { readonly, signal } from '../reactive/index';
+import type { NetworkSignal, NetworkState } from './types';
+
+/**
+ * Navigator connection interface for the Network Information API.
+ * @internal
+ */
+interface NavigatorConnection extends EventTarget {
+  effectiveType?: string;
+  downlink?: number;
+  rtt?: number;
+}
+
+/**
+ * Extended Navigator with connection property.
+ * @internal
+ */
+interface NavigatorWithConnection extends Navigator {
+  connection?: NavigatorConnection;
+}
+
+/**
+ * Reads current network state from browser APIs.
+ * @internal
+ */
+const getNetworkState = (): NetworkState => {
+  const online =
+    typeof navigator !== 'undefined' && navigator.onLine !== undefined ? navigator.onLine : true;
+
+  const nav = typeof navigator !== 'undefined' ? (navigator as NavigatorWithConnection) : undefined;
+  const conn = nav?.connection;
+
+  return {
+    online,
+    effectiveType: conn?.effectiveType ?? 'unknown',
+    downlink: conn?.downlink ?? 0,
+    rtt: conn?.rtt ?? 0,
+  };
+};
+
+/**
+ * Returns a reactive signal tracking network connectivity and quality.
+ *
+ * Tracks whether the browser is online/offline and, where supported,
+ * the effective connection type, downlink speed, and round-trip time
+ * via the Network Information API.
+ *
+ * @returns A readonly reactive signal with `{ online, effectiveType, downlink, rtt }`
+ * and a `destroy()` method to remove attached listeners
+ *
+ * @example
+ * ```ts
+ * import { useNetworkStatus } from '@bquery/bquery/media';
+ * import { effect } from '@bquery/bquery/reactive';
+ *
+ * const net = useNetworkStatus();
+ * effect(() => {
+ *   if (!net.value.online) {
+ *     console.warn('You are offline!');
+ *   }
+ *   console.log(`Connection: ${net.value.effectiveType}, RTT: ${net.value.rtt}ms`);
+ * });
+ * ```
+ */
+export const useNetworkStatus = (): NetworkSignal => {
+  const s = signal<NetworkState>(getNetworkState());
+  let cleanup: (() => void) | undefined;
+
+  if (typeof window !== 'undefined') {
+    const update = (): void => {
+      s.value = getNetworkState();
+    };
+
+    window.addEventListener('online', update);
+    window.addEventListener('offline', update);
+
+    const nav =
+      typeof navigator !== 'undefined' ? (navigator as NavigatorWithConnection) : undefined;
+    if (nav?.connection && typeof nav.connection.addEventListener === 'function') {
+      nav.connection.addEventListener('change', update);
+    }
+
+    cleanup = () => {
+      window.removeEventListener('online', update);
+      window.removeEventListener('offline', update);
+      if (nav?.connection && typeof nav.connection.removeEventListener === 'function') {
+        nav.connection.removeEventListener('change', update);
+      }
+    };
+  }
+
+  const ro = readonly(s) as NetworkSignal;
+  let destroyed = false;
+  Object.defineProperty(ro, 'destroy', {
+    value(): void {
+      if (destroyed) return;
+      destroyed = true;
+      cleanup?.();
+      s.dispose();
+    },
+    enumerable: false,
+    configurable: true,
+  });
+
+  return ro;
+};