<!-- source-hash: 24f090768a3d572fe819879e60f540e1 -->
Provides animated expand/collapse behavior for a container element by measuring content height and toggling `max-height` with a CSS transition.

## Key Components

### `UseCollapsibleOptions`
Configuration interface for the hook:
- `expanded` — controls whether the content is expanded or collapsed
- `collapsedHeight` — collapsed height in pixels or `"1lh"` (one line-height); defaults to `0`
- `disableTransition` — skips the CSS transition when `true`; defaults to `false`
- `durationMs` — transition duration in milliseconds; defaults to `200`

### `useCollapsible(options)`
Main hook that returns:
- `innerRef` — ref callback to attach to the collapsible content `div`
- `isOverflowing` — `true` when content height exceeds the collapsed height (useful for showing "show more" triggers)
- `containerStyle` — computed `CSSProperties` object with `overflow`, `max-height`, and `transition` to spread onto the wrapper element

**`"1lh"` handling:** When `collapsedHeight` is `"1lh"`, the hook measures the inner element's `lineHeight` via `getComputedStyle` and uses the resolved pixel value instead of the raw CSS unit. This prevents the outer element's line-height from leaking adjacent content past the clip boundary.

A `ResizeObserver` watches the inner element and re-measures on size changes, keeping `contentHeight` accurate.

## Usage Example

```typescript
function CollapsibleText({ text }: { text: string }) {
  const [expanded, setExpanded] = useState(false)

  const { innerRef, containerStyle, isOverflowing } = useCollapsible({
    expanded,
    collapsedHeight: "1lh",
    durationMs: 300,
  })

  return (
    <div>
      <div style={containerStyle}>
        <div ref={innerRef}>{text}</div>
      </div>
      {isOverflowing && (
        <button onClick={() => setExpanded(!expanded)}>
          {expanded ? "Show less" : "Show more"}
        </button>
      )}
    </div>
  )
}
```