# Dialog.Content

Renders native dialog content synchronized with hydrated state.

## Signatures

```ts
export declare function Content<const Options extends ContentOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, ContentInternalProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
```

## Why

`Content` uses a real `<dialog>` and its `show()`, `showModal()`, `close()`,
`cancel`, `close`, and `toggle` lifecycle. The browser therefore owns focus,
top-layer placement, modal inertness, and default Escape behavior.

## Ownership and lifetime

Running the Fx owns native listeners, dialog registration, and the
NativeDialog observer in its Effect Scope. Finalization removes registration
only when it still points at this element. A custom host must preserve native
dialog identity, naming props, lifecycle handlers, and exactly one hydration
ref owner.

## Examples

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

const program = Effect.gen(function* () {
  const state = yield* Dialog.makeState()
  return Dialog.Content({
    state,
    id: "confirm",
    label: "Confirm",
    content: "Continue?"
  })
})
```