# ref

Creates a scoped ref that synchronizes state with the native Popover API.

## Signatures

```ts
export declare function ref<S extends State, E, R>(state: RefSubject.RefSubject<S, E, R>): (element: HTMLElement) => Effect.Effect<void, E, R | Scope.Scope>;
```

## Why

The browser owns top-layer placement and popover lifecycle. The ref checks
`:popover-open` before calling `showPopover()` or `hidePopover()`, avoiding
invalid duplicate transitions while preserving native toggle events.

## Ownership and lifetime

Applying the ref forks one observer in the current Effect Scope. Opening
waits for a detached host to connect. A newer state or Scope finalization
cancels that pending connection check; hidden documents may defer it until
animation frames resume. Closing the Scope interrupts observation without
removing the host or closing caller-owned state. The host must support the Popover API and retain its `popover`
attribute. Only one hydration owner may be composed for the element.

## Examples

```ts
import { Effect } from "effect"
import * as NativePopover from "@typed/ui/NativePopover"
import * as Popover from "@typed/ui/Popover"

const program = Effect.gen(function* () {
  const state = yield* Popover.makeState()
  return NativePopover.ref(state)
})
```