<!-- source-hash: d6766f600f05a52d295b880209627895 -->
React hook that tracks and requests browser desktop notification permission, with cross-browser support including a Safari compatibility fallback.

## Key Components

### `UseNotificationPermissionResult` (interface)

| Property | Type | Description |
|---|---|---|
| `supported` | `boolean` | Whether the Notification API is available (false during SSR or on iOS Safari) |
| `permission` | `NotificationPermission` | Current permission state: `"default"`, `"granted"`, or `"denied"` |
| `request` | `() => Promise<NotificationPermission>` | Prompts the user for permission; must be triggered by a user gesture |

### `useNotificationPermission()` (hook)

Initializes permission state and registers three sync strategies to stay current:

1. **Permissions API** — `navigator.permissions.query({ name: 'notifications' })` change event (Chrome, Firefox)
2. **Visibility change** — re-reads `Notification.permission` when the tab becomes visible (Safari fallback)
3. **Window focus** — re-reads on focus for cases where the user changed site settings in a browser panel

Cleans up all listeners on unmount via a `cancelled` flag guard to prevent attaching listeners after the effect tears down.

## Usage Example

```typescript
import { useNotificationPermission } from './use-notification-permission'

function NotificationToggle() {
  const { supported, permission, request } = useNotificationPermission()

  if (!supported) return null

  return (
    <button
      onClick={request}
      disabled={permission === 'granted' || permission === 'denied'}
    >
      {permission === 'granted'
        ? 'Notifications enabled'
        : permission === 'denied'
        ? 'Notifications blocked'
        : 'Enable notifications'}
    </button>
  )
}
```

> **Note:** Call `request()` only inside a user gesture handler (click, keydown, etc.). Browsers silently deny programmatic calls made outside a gesture context.