@typed/ui 1.0.0-beta.4 → 1.0.0-beta.5

package/dist/Meter.d.ts

@@ -0,0 +1,217 @@
+import * as Effect from "effect/Effect";
+import * as Schema from "effect/Schema";
+import { RefSubject } from "@typed/fx";
+import { type Renderable } from "@typed/template";
+import * as Dom from "./Dom.js";
+import type { HostResult } from "./Dom/Types.js";
+/** Current value displayed by the meter.
+ * @remarks
+ * ## Why
+ * Renderer-independent state can be updated and tested before a meter mounts.
+ * ## Ownership and lifetime
+ * Plain state acquires no resources; the hydrated RefSubject owns observation.
+ * @since 1.0.0
+ * @category state
+ */
+export interface State {
+    /** Finite scalar reflected to the native meter value.
+     * @remarks
+     * ## Why
+     * One value drives DOM output and state consumers consistently.
+     * ## Ownership and lifetime
+     * Plain data retains no resources.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly value: number;
+}
+/** Initial finite meter value.
+ * @remarks
+ * ## Why
+ * Explicit input makes the hydration snapshot deterministic.
+ * ## Ownership and lifetime
+ * Configuration is inert and copied into state.
+ * @since 1.0.0
+ * @category state
+ */
+export interface InitialState {
+    /** Value used for the initial snapshot.
+     * @remarks
+     * ## Why
+     * The native meter needs a concrete value independent of its range metadata.
+     * ## Ownership and lifetime
+     * Plain data acquires no resources.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly value: number;
+}
+/** Schema for serializing finite meter state.
+ * @remarks
+ * ## Why
+ * Rejecting non-finite values keeps SSR and native DOM output valid.
+ * ## Ownership and lifetime
+ * The immutable schema acquires no resources.
+ * @since 1.0.0
+ * @category schemas
+ */
+export declare const StateSchema: Schema.Struct<{
+    readonly value: Schema.Finite;
+}>;
+/** Creates hydrated meter state.
+ * @remarks
+ * ## Why
+ * The state remains testable and reusable without rendering a UI component.
+ * ## Ownership and lifetime
+ * The caller's Effect Scope owns the hydrated RefSubject.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Meter from "@typed/ui/Meter"
+ *
+ * const program = Effect.gen(function* () {
+ *   return yield* Meter.makeState({ value: 0.72 })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category constructors
+ */
+export declare function makeState(initial: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
+    readonly value: number;
+}, Schema.SchemaError, never, never>, never, import("effect/Scope").Scope>;
+/** Updates the displayed meter value.
+ * @remarks
+ * ## Why
+ * State transitions stay outside rendering and preserve typed error/services.
+ * ## Ownership and lifetime
+ * The Effect uses the existing RefSubject lifetime and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Meter from "@typed/ui/Meter"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Meter.makeState({ value: 0 })
+ *   yield* Meter.setValue(state, 0.75)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export declare function setValue<E, R>(state: RefSubject.RefSubject<State, E, R>, value: number): Effect.Effect<State, E, R>;
+/** Native meter range, threshold, content, and state options.
+ * @remarks
+ * ## Why
+ * These mirror the platform meter element rather than reimplementing its
+ * accessibility and range interpretation.
+ * ## Ownership and lifetime
+ * Options are inert; rendering owns reactive subscriptions by Scope.
+ * @since 1.0.0
+ * @category models
+ */
+export interface MeterOptions extends Dom.HostOptions<HTMLMeterElement> {
+    /** Hydrated value state borrowed by the element.
+     * @remarks
+     * ## Why
+     * One source keeps the native value and application state aligned.
+     * ## Ownership and lifetime
+     * Its original Scope owns it; the component only subscribes while mounted.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
+    /** Lower bound of the measured range.
+     * @remarks
+     * ## Why
+     * Native meter semantics use the bound to interpret `value`.
+     * ## Ownership and lifetime
+     * Dynamic attributes follow the component Scope.
+     * @since 1.0.0
+     * @category attributes
+     */
+    readonly min?: Renderable.Any<number | null | undefined>;
+    /** Upper bound of the measured range.
+     * @remarks
+     * ## Why
+     * Native meter semantics use the bound to interpret `value`.
+     * ## Ownership and lifetime
+     * Dynamic attributes follow the component Scope.
+     * @since 1.0.0
+     * @category attributes
+     */
+    readonly max?: Renderable.Any<number | null | undefined>;
+    /** Boundary below which values are considered low.
+     * @remarks
+     * ## Why
+     * The browser uses this native threshold with `high` and `optimum`.
+     * ## Ownership and lifetime
+     * Dynamic attributes follow the component Scope.
+     * @since 1.0.0
+     * @category attributes
+     */
+    readonly low?: Renderable.Any<number | null | undefined>;
+    /** Boundary above which values are considered high.
+     * @remarks
+     * ## Why
+     * It preserves native threshold semantics and accessibility exposure.
+     * ## Ownership and lifetime
+     * Dynamic attributes follow the component Scope.
+     * @since 1.0.0
+     * @category attributes
+     */
+    readonly high?: Renderable.Any<number | null | undefined>;
+    /** Preferred value within the meter range.
+     * @remarks
+     * ## Why
+     * Native rendering interprets threshold quality relative to this value.
+     * ## Ownership and lifetime
+     * Dynamic attributes follow the component Scope.
+     * @since 1.0.0
+     * @category attributes
+     */
+    readonly optimum?: Renderable.Any<number | null | undefined>;
+    /** Fallback content rendered inside the meter.
+     * @remarks
+     * ## Why
+     * Text content provides useful output where meter rendering is unavailable.
+     * ## Ownership and lifetime
+     * Dynamic content follows the component Scope.
+     * @since 1.0.0
+     * @category content
+     */
+    readonly content?: Renderable.Any;
+}
+declare function internalProps<const Options extends MeterOptions>(options: Options): ({ property }: Dom.InternalPropsHelpers<Options>) => {
+    readonly value: RefSubject.Computed<number, Schema.SchemaError, never>;
+    readonly min: Exclude<Dom.Property<Options, "min">, Dom.Nullish> | undefined;
+    readonly max: Exclude<Dom.Property<Options, "max">, Dom.Nullish> | undefined;
+    readonly low: Exclude<Dom.Property<Options, "low">, Dom.Nullish> | undefined;
+    readonly high: Exclude<Dom.Property<Options, "high">, Dom.Nullish> | undefined;
+    readonly optimum: Exclude<Dom.Property<Options, "optimum">, Dom.Nullish> | undefined;
+    readonly ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
+};
+type MeterInternalProps<Options extends MeterOptions> = ReturnType<ReturnType<typeof internalProps<Options>>>;
+/** Renders a native `<meter>` synchronized with hydrated state.
+ * @remarks
+ * ## Why
+ * The platform owns range semantics and accessibility while Typed composes
+ * reactive state and custom hosts around the real element.
+ * ## Ownership and lifetime
+ * Running the Fx owns attribute/state subscriptions until its Scope closes. A
+ * custom host must preserve native meter attributes and the hydration ref.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Meter from "@typed/ui/Meter"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Meter.makeState({ value: 64 })
+ *   return Meter.Meter({ state, min: 0, max: 100 })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export declare function Meter<const Options extends MeterOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, MeterInternalProps<Options>>, Options["content"], Host>): import("./Dom/Types.js").HostComponent<Host | Options>;
+export {};
+//# sourceMappingURL=Meter.d.ts.map

package/dist/Meter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.d.ts","sourceRoot":"","sources":["../src/Meter.ts"],"names":[],"mappings":"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"}

package/dist/Meter.js

@@ -0,0 +1,94 @@
+import * as Schema from "effect/Schema";
+import { RefSubject } from "@typed/fx";
+import { html } from "@typed/template";
+import * as Dom from "./Dom.js";
+/** Schema for serializing finite meter state.
+ * @remarks
+ * ## Why
+ * Rejecting non-finite values keeps SSR and native DOM output valid.
+ * ## Ownership and lifetime
+ * The immutable schema acquires no resources.
+ * @since 1.0.0
+ * @category schemas
+ */
+export const StateSchema = Schema.Struct({ value: Schema.Finite });
+/** Creates hydrated meter state.
+ * @remarks
+ * ## Why
+ * The state remains testable and reusable without rendering a UI component.
+ * ## Ownership and lifetime
+ * The caller's Effect Scope owns the hydrated RefSubject.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Meter from "@typed/ui/Meter"
+ *
+ * const program = Effect.gen(function* () {
+ *   return yield* Meter.makeState({ value: 0.72 })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category constructors
+ */
+export function makeState(initial) {
+    return RefSubject.hydrate(StateSchema, initial);
+}
+/** Updates the displayed meter value.
+ * @remarks
+ * ## Why
+ * State transitions stay outside rendering and preserve typed error/services.
+ * ## Ownership and lifetime
+ * The Effect uses the existing RefSubject lifetime and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Meter from "@typed/ui/Meter"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Meter.makeState({ value: 0 })
+ *   yield* Meter.setValue(state, 0.75)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export function setValue(state, value) {
+    return RefSubject.update(state, (current) => ({ ...current, value }));
+}
+function internalProps(options) {
+    return ({ property }) => ({
+        value: RefSubject.map(options.state, (state) => state.value),
+        min: property("min", undefined),
+        max: property("max", undefined),
+        low: property("low", undefined),
+        high: property("high", undefined),
+        optimum: property("optimum", undefined),
+        ref: options.state,
+    });
+}
+/** Renders a native `<meter>` synchronized with hydrated state.
+ * @remarks
+ * ## Why
+ * The platform owns range semantics and accessibility while Typed composes
+ * reactive state and custom hosts around the real element.
+ * ## Ownership and lifetime
+ * Running the Fx owns attribute/state subscriptions until its Scope closes. A
+ * custom host must preserve native meter attributes and the hydration ref.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Meter from "@typed/ui/Meter"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Meter.makeState({ value: 64 })
+ *   return Meter.Meter({ state, min: 0, max: 100 })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export function Meter(options, host) {
+    return Dom.renderHost()(options, host, internalProps(options), options.content ?? "", (props, content) => {
+        return html `<meter ...${props}>${content}</meter>`;
+    });
+}

package/dist/NativeDetails.d.ts

@@ -0,0 +1,41 @@
+import * as Effect from "effect/Effect";
+import type * as Scope from "effect/Scope";
+import { RefSubject } from "@typed/fx";
+interface State {
+    readonly open: boolean;
+}
+/**
+ * Creates a scoped ref that synchronizes state to a native `<details>` element.
+ *
+ * @remarks
+ * ## Why
+ *
+ * `<details>` already owns disclosure rendering and keyboard behavior. This ref
+ * only applies pushed `open` state to that real element; the public Disclosure
+ * component listens to native `toggle` events for the reverse direction.
+ *
+ * ## Ownership and lifetime
+ *
+ * Applying the ref forks one observer in the current Effect Scope. Scope
+ * finalization interrupts it; the state remains owned by its original Scope and
+ * the DOM element remains owned by its renderer. Use only one hydration ref
+ * owner for an element.
+ *
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Disclosure from "@typed/ui/Disclosure"
+ * import * as NativeDetails from "@typed/ui/NativeDetails"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Disclosure.makeState()
+ *   return NativeDetails.ref(state)
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category refs
+ */
+export declare function ref<S extends State, E, R>(state: RefSubject.RefSubject<S, E, R>): (element: HTMLDetailsElement) => Effect.Effect<void, E, R | Scope.Scope>;
+export {};
+//# sourceMappingURL=NativeDetails.d.ts.map

package/dist/NativeDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeDetails.d.ts","sourceRoot":"","sources":["../src/NativeDetails.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,KAAK,KAAK,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAM,UAAU,EAAE,MAAM,WAAW,CAAC;AAE3C,UAAU,KAAK;IACb,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,GAAG,CAAC,CAAC,SAAS,KAAK,EAAE,CAAC,EAAE,CAAC,EACvC,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GACpC,CAAC,OAAO,EAAE,kBAAkB,KAAK,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAe1E"}

package/dist/NativeDetails.js

@@ -0,0 +1,40 @@
+import * as Effect from "effect/Effect";
+import { Fx } from "@typed/fx";
+/**
+ * Creates a scoped ref that synchronizes state to a native `<details>` element.
+ *
+ * @remarks
+ * ## Why
+ *
+ * `<details>` already owns disclosure rendering and keyboard behavior. This ref
+ * only applies pushed `open` state to that real element; the public Disclosure
+ * component listens to native `toggle` events for the reverse direction.
+ *
+ * ## Ownership and lifetime
+ *
+ * Applying the ref forks one observer in the current Effect Scope. Scope
+ * finalization interrupts it; the state remains owned by its original Scope and
+ * the DOM element remains owned by its renderer. Use only one hydration ref
+ * owner for an element.
+ *
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Disclosure from "@typed/ui/Disclosure"
+ * import * as NativeDetails from "@typed/ui/NativeDetails"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Disclosure.makeState()
+ *   return NativeDetails.ref(state)
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category refs
+ */
+export function ref(state) {
+    return Effect.fn((element) => Effect.asVoid(Effect.forkScoped(Fx.observe(state, Effect.fn((value) => Effect.sync(() => {
+        if (element.open !== value.open)
+            element.open = value.open;
+    }))))));
+}

package/dist/NativeDialog.d.ts

@@ -0,0 +1,64 @@
+import * as Effect from "effect/Effect";
+import type * as Scope from "effect/Scope";
+import { RefSubject } from "@typed/fx";
+interface State {
+    readonly open: boolean;
+}
+/** Native dialog synchronization mode.
+ * @remarks
+ * ## Why
+ * The choice maps directly to `showModal()` or `show()` rather than simulating
+ * modality in application code.
+ * ## Ownership and lifetime
+ * Options are inert and retain no resources.
+ * @since 1.0.0
+ * @category models
+ */
+export interface Options {
+    /** Whether opening uses the modal top layer; defaults to true.
+     * @remarks
+     * ## Why
+     * Modal and non-modal dialogs have different focus, inertness, and dismissal
+     * behavior owned by the browser.
+     * ## Ownership and lifetime
+     * The flag is read during synchronization and retains no resources.
+     * @since 1.0.0
+     * @category behavior
+     */
+    readonly modal?: boolean;
+}
+/**
+ * Creates a scoped ref that drives a real `HTMLDialogElement` from state.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The ref delegates open/close, top-layer placement, focus handling, and modal
+ * inertness to `showModal()`, `show()`, and `close()`. It does not reproduce a
+ * dialog with ordinary divs or synthetic events.
+ *
+ * ## Ownership and lifetime
+ *
+ * Applying the ref forks an observer in the current Effect Scope. Finalization
+ * interrupts that observer but does not close state owned elsewhere or remove
+ * the element. `Dialog.Content` handles native `cancel`, `close`, and `toggle`
+ * events and composes exactly one hydration owner.
+ *
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Dialog from "@typed/ui/Dialog"
+ * import * as NativeDialog from "@typed/ui/NativeDialog"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Dialog.makeState()
+ *   return NativeDialog.ref(state, { modal: true })
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category refs
+ */
+export declare function ref<S extends State, E, R>(state: RefSubject.RefSubject<S, E, R>, options?: Options): (element: HTMLDialogElement) => Effect.Effect<void, E, R | Scope.Scope>;
+export {};
+//# sourceMappingURL=NativeDialog.d.ts.map

package/dist/NativeDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeDialog.d.ts","sourceRoot":"","sources":["../src/NativeDialog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,KAAK,KAAK,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAM,UAAU,EAAE,MAAM,WAAW,CAAC;AAE3C,UAAU,KAAK;IACb,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,OAAO;IACtB;;;;;;;;;OASG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,GAAG,CAAC,CAAC,SAAS,KAAK,EAAE,CAAC,EAAE,CAAC,EACvC,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACrC,OAAO,GAAE,OAAY,GACpB,CAAC,OAAO,EAAE,iBAAiB,KAAK,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAWzE"}

package/dist/NativeDialog.js

@@ -0,0 +1,50 @@
+import * as Effect from "effect/Effect";
+import { Fx } from "@typed/fx";
+/**
+ * Creates a scoped ref that drives a real `HTMLDialogElement` from state.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The ref delegates open/close, top-layer placement, focus handling, and modal
+ * inertness to `showModal()`, `show()`, and `close()`. It does not reproduce a
+ * dialog with ordinary divs or synthetic events.
+ *
+ * ## Ownership and lifetime
+ *
+ * Applying the ref forks an observer in the current Effect Scope. Finalization
+ * interrupts that observer but does not close state owned elsewhere or remove
+ * the element. `Dialog.Content` handles native `cancel`, `close`, and `toggle`
+ * events and composes exactly one hydration owner.
+ *
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Dialog from "@typed/ui/Dialog"
+ * import * as NativeDialog from "@typed/ui/NativeDialog"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Dialog.makeState()
+ *   return NativeDialog.ref(state, { modal: true })
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category refs
+ */
+export function ref(state, options = {}) {
+    return Effect.fn((element) => Effect.asVoid(Effect.forkScoped(Fx.observe(state, Effect.fn((value) => Effect.sync(() => synchronize(element, value.open, options)))))));
+}
+function synchronize(element, open, options) {
+    if (open) {
+        if (element.open)
+            return;
+        if (options.modal === false)
+            element.show();
+        else
+            element.showModal();
+    }
+    else if (element.open) {
+        element.close();
+    }
+}

package/dist/NativePopover.d.ts

@@ -0,0 +1,41 @@
+import * as Effect from "effect/Effect";
+import type * as Scope from "effect/Scope";
+import { RefSubject } from "@typed/fx";
+interface State {
+    readonly open: boolean;
+}
+/**
+ * Creates a scoped ref that synchronizes state with the native Popover API.
+ *
+ * @remarks
+ * ## 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. Closing the
+ * Scope interrupts it; it does not remove the host or close the 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.
+ *
+ * @example
+ * ```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)
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category refs
+ */
+export declare function ref<S extends State, E, R>(state: RefSubject.RefSubject<S, E, R>): (element: HTMLElement) => Effect.Effect<void, E, R | Scope.Scope>;
+export {};
+//# sourceMappingURL=NativePopover.d.ts.map

package/dist/NativePopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativePopover.d.ts","sourceRoot":"","sources":["../src/NativePopover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,KAAK,KAAK,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAM,UAAU,EAAE,MAAM,WAAW,CAAC;AAE3C,UAAU,KAAK;IACb,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,GAAG,CAAC,CAAC,SAAS,KAAK,EAAE,CAAC,EAAE,CAAC,EACvC,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GACpC,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAWnE"}

package/dist/NativePopover.js

@@ -0,0 +1,46 @@
+import * as Effect from "effect/Effect";
+import { Fx } from "@typed/fx";
+/**
+ * Creates a scoped ref that synchronizes state with the native Popover API.
+ *
+ * @remarks
+ * ## 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. Closing the
+ * Scope interrupts it; it does not remove the host or close the 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.
+ *
+ * @example
+ * ```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)
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category refs
+ */
+export function ref(state) {
+    return Effect.fn((element) => Effect.asVoid(Effect.forkScoped(Fx.observe(state, Effect.fn((value) => Effect.sync(() => synchronize(element, value.open)))))));
+}
+function synchronize(element, open) {
+    if (open) {
+        if (!element.matches(":popover-open"))
+            element.showPopover();
+    }
+    else if (element.matches(":popover-open")) {
+        element.hidePopover();
+    }
+}