<!-- source-hash: 658ce45ffa6bcde5f5bc895ea6b0b28a -->
React hook for responsive design that detects whether a CSS media query matches the current viewport, returning `undefined` during SSR to avoid hydration mismatches.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `useMediaQuery` | Hook | Core hook accepting any CSS media query string |
| `breakpoints` | Object | Predefined breakpoints: `md` (800px), `lg` (1280px) |
| `useMdUp` | Hook | Returns `true` when viewport ≥ 800px |
| `useLgUp` | Hook | Returns `true` when viewport ≥ 1280px |
| `useSmUp` | Hook | ⚠️ Deprecated — alias for `useMdUp` |

## Usage Example

```typescript
import { useMediaQuery, useMdUp, useLgUp, breakpoints } from "./use-media-query"

// Custom query
function Component() {
  const isPortrait = useMediaQuery("(orientation: portrait)")

  // Returns undefined on first render (SSR-safe)
  if (isPortrait === undefined) return <Skeleton />
  return <div>{isPortrait ? "Portrait" : "Landscape"}</div>
}

// Predefined breakpoints
function ResponsiveLayout() {
  const isMd = useMdUp()  // >= 800px
  const isLg = useLgUp()  // >= 1280px

  return (
    <div>
      {isLg ? <DesktopNav /> : isMd ? <TabletNav /> : <MobileNav />}
    </div>
  )
}

// Using breakpoints object directly
const isDesktop = useMediaQuery(breakpoints.lg)
```

## Notes

- Returns `undefined` during SSR and initial render — always guard against this before conditionally rendering UI
- Uses `useLayoutEffect` to synchronously read the media query state before paint, preventing layout flicker
- Automatically cleans up the `change` event listener on unmount