{
  "id": "@typed/ui/NativePopover#ref",
  "canonicalId": "@typed/ui/NativePopover#ref",
  "symbol": {
    "id": "@typed/ui/NativePopover#ref",
    "packageName": "@typed/ui",
    "moduleName": "NativePopover",
    "exportName": "ref",
    "kind": "function",
    "signatures": [
      "export declare function ref<S extends State, E, R>(state: RefSubject.RefSubject<S, E, R>): (element: HTMLElement) => Effect.Effect<void, E, R | Scope.Scope>;"
    ],
    "summary": "Creates a scoped ref that synchronizes state with the native Popover API.",
    "sections": {
      "Why": "The browser owns top-layer placement and popover lifecycle. The ref checks\n`:popover-open` before calling `showPopover()` or `hidePopover()`, avoiding\ninvalid duplicate transitions while preserving native toggle events.",
      "Ownership and lifetime": "Applying the ref forks one observer in the current Effect Scope. Opening\nwaits for a detached host to connect. A newer state or Scope finalization\ncancels that pending connection check; hidden documents may defer it until\nanimation frames resume. Closing the Scope interrupts observation without\nremoving the host or closing caller-owned state. The host must support the Popover API and retain its `popover`\nattribute. Only one hydration owner may be composed for the element."
    },
    "examples": [
      {
        "language": "ts",
        "code": "import { Effect } from \"effect\"\nimport * as NativePopover from \"@typed/ui/NativePopover\"\nimport * as Popover from \"@typed/ui/Popover\"\n\nconst program = Effect.gen(function* () {\n  const state = yield* Popover.makeState()\n  return NativePopover.ref(state)\n})"
      }
    ],
    "relations": [],
    "source": {
      "file": "packages/ui/src/NativePopover.ts",
      "line": 44
    },
    "since": "1.0.0",
    "category": "Native synchronization"
  },
  "exposure": {
    "recordKind": "declaration",
    "id": "@typed/ui/NativePopover#ref",
    "packageName": "@typed/ui",
    "packageVersion": "1.0.0-beta.7",
    "moduleName": "NativePopover",
    "consumerSpecifier": "@typed/ui/NativePopover",
    "exportName": "ref",
    "qualifiedName": "ref",
    "declarationKey": "declaration:9d6f31ca329f9df2fa9ca267",
    "family": "function",
    "signatures": [
      "export declare function ref<S extends State, E, R>(state: RefSubject.RefSubject<S, E, R>): (element: HTMLElement) => Effect.Effect<void, E, R | Scope.Scope>;"
    ],
    "sourceSpans": [
      {
        "file": "packages/ui/src/NativePopover.ts",
        "start": {
          "line": 44,
          "column": 1
        },
        "end": {
          "line": 67,
          "column": 2
        }
      }
    ],
    "aliases": [],
    "isAlias": false,
    "static": false
  },
  "declaration": {
    "declarationKey": "declaration:9d6f31ca329f9df2fa9ca267",
    "name": "ref",
    "family": "function",
    "facets": [
      {
        "family": "function",
        "syntaxKind": "FunctionDeclaration",
        "signatures": [
          "export declare function ref<S extends State, E, R>(state: RefSubject.RefSubject<S, E, R>): (element: HTMLElement) => Effect.Effect<void, E, R | Scope.Scope>;"
        ],
        "typeParameters": [
          "S extends State",
          "E",
          "R"
        ],
        "sourceSpans": [
          {
            "file": "packages/ui/src/NativePopover.ts",
            "start": {
              "line": 44,
              "column": 1
            },
            "end": {
              "line": 67,
              "column": 2
            }
          }
        ],
        "static": false,
        "readonly": false,
        "optional": false
      }
    ],
    "signatures": [
      "export declare function ref<S extends State, E, R>(state: RefSubject.RefSubject<S, E, R>): (element: HTMLElement) => Effect.Effect<void, E, R | Scope.Scope>;"
    ],
    "typeParameters": [
      "S extends State",
      "E",
      "R"
    ],
    "summary": "Creates a scoped ref that synchronizes state with the native Popover API.",
    "sections": {
      "Why": "The browser owns top-layer placement and popover lifecycle. The ref checks\n`:popover-open` before calling `showPopover()` or `hidePopover()`, avoiding\ninvalid duplicate transitions while preserving native toggle events.",
      "Ownership and lifetime": "Applying the ref forks one observer in the current Effect Scope. Opening\nwaits for a detached host to connect. A newer state or Scope finalization\ncancels that pending connection check; hidden documents may defer it until\nanimation frames resume. Closing the Scope interrupts observation without\nremoving the host or closing caller-owned state. The host must support the Popover API and retain its `popover`\nattribute. Only one hydration owner may be composed for the element."
    },
    "examples": [
      {
        "language": "ts",
        "code": "import { Effect } from \"effect\"\nimport * as NativePopover from \"@typed/ui/NativePopover\"\nimport * as Popover from \"@typed/ui/Popover\"\n\nconst program = Effect.gen(function* () {\n  const state = yield* Popover.makeState()\n  return NativePopover.ref(state)\n})"
      }
    ],
    "sourceSpans": [
      {
        "file": "packages/ui/src/NativePopover.ts",
        "start": {
          "line": 44,
          "column": 1
        },
        "end": {
          "line": 67,
          "column": 2
        }
      }
    ],
    "since": "1.0.0",
    "category": "Native synchronization"
  }
}