<!-- source-hash: 542d3494c008ba1da83803f8b2a5a8bc -->
React hook that measures and tracks the combined pixel height of the sticky page header and optional announcement bar in real time, using `ResizeObserver` and `MutationObserver`.

## Key Components

- **`useHeaderHeight(defaultHeight?, options?)`** — Main export. Queries `<header>` and `[data-announcement-bar]` elements, sums their `offsetHeight` values, and re-measures whenever either element resizes or the DOM changes.
- **`enabled` option** — Gates all observer setup. When `false`, skips measurement and returns `defaultHeight` immediately, avoiding document-wide observers for components that are always mounted but only need the value while an overlay is open.
- **`ResizeObserver`** — Watches both the header and announcement bar for size changes.
- **`MutationObserver`** — Watches `document.body` for child list changes or `data-announcement-bar` attribute mutations (e.g., bar appearing/disappearing dynamically), then re-observes the bar if it's newly added.

## Usage Example

```typescript
import { useHeaderHeight } from './use-header-height'

// Basic usage — offsets a fixed panel below the header
function SearchOverlay({ isOpen }: { isOpen: boolean }) {
  const headerHeight = useHeaderHeight(64, { enabled: isOpen })

  return (
    <div
      style={{ top: headerHeight }}
      className="fixed inset-x-0 bottom-0 z-50"
    >
      {/* panel content */}
    </div>
  )
}
```

> Pass `enabled: isOpen` to avoid attaching document-wide observers when the overlay is closed.

## Notes

- Falls back to `defaultHeight` (default `64`) when no matching elements are found or when `enabled` is `false`.
- Observers are fully disconnected on unmount or when `enabled` changes to `false`.
- Source: [`use-header-height.ts`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/use-header-height.ts)