@typed/ui 1.0.0-beta.0 → 1.0.0-beta.10

package/dist/Meter.js

@@ -0,0 +1,87 @@
+import * as Schema from "effect/Schema";
+import { RefSubject } from "@typed/fx";
+import { html } from "@typed/template";
+import * as Dom from "./Dom.js";
+/**
+ */
+export const StateSchema = Schema.Struct({ value: Schema.Finite });
+/**
+ * Creates hydrated meter state.
+ * @remarks
+ * The state remains testable and reusable without rendering a UI component.
+ * 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 State construction
+ */
+export function makeState(initial) {
+    return RefSubject.hydrate(StateSchema, initial);
+}
+/**
+ * Assigns the displayed measurement without clamping it to the meter range.
+ *
+ * @remarks
+ * Keep measurement units consistent with min/max and threshold options. This operation does not
+ * execute threshold actions or validate the preferred range.
+ * @since 1.0.0
+ * @category State transitions
+ */
+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 for a measurement within a known range.
+ *
+ * @remarks
+ * Supply a label and coherent min/max/low/high/optimum values. The browser presents thresholds;
+ * the component does not trigger alerts when they are crossed. Use a slider for editing or a
+ * progress element for operation completion. The meter has no keyboard action.
+ *
+ * @example
+ * ```ts
+ * import { RefSubject } from "@typed/fx";
+ * import { html } from "@typed/template";
+ * import { component } from "@typed/template";
+ * import * as Meter from "@typed/ui/Meter";
+ *
+ * export const StorageUsage = component(function* () {
+ *   const state = yield* Meter.makeState({ value: 64 });
+ *   const description = RefSubject.map(state, ({ value }) => `${value} GB of 100 GB used`);
+ *   return html`<section>
+ *     <label for="storage-meter">Storage used</label>
+ *     ${Meter.Meter({
+ *       state, min: 0, max: 100, low: 60, high: 85, optimum: 0,
+ *       content: description,
+ *       props: { id: "storage-meter", "aria-valuetext": description },
+ *     })}
+ *     <p>${description}</p>
+ *   </section>`;
+ * });
+ * ```
+ * @since 1.0.0
+ * @category Controls
+ */
+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 Native synchronization
+ */
+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 Native synchronization
+ */
+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,66 @@
+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 Native display options
+ */
+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 Native display options
+     */
+    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. Modal opening
+ * waits for a detached host to connect; a newer state or Scope finalization cancels
+ * that pending connection check. Hidden documents may defer the check until animation
+ * frames resume. Finalization 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 Native synchronization
+ */
+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;AAExC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;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,CAqBzE"}

package/dist/NativeDialog.js

@@ -0,0 +1,88 @@
+import * as Effect from "effect/Effect";
+import * as Fiber from "effect/Fiber";
+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. Modal opening
+ * waits for a detached host to connect; a newer state or Scope finalization cancels
+ * that pending connection check. Hidden documents may defer the check until animation
+ * frames resume. Finalization 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 Native synchronization
+ */
+export function ref(state, options = {}) {
+    return Effect.fn(function* (element) {
+        let pending;
+        yield* Effect.forkScoped(Fx.observe(state, Effect.fn(function* (value) {
+            if (pending !== undefined) {
+                const previous = pending;
+                pending = undefined;
+                yield* Fiber.interrupt(previous);
+            }
+            const update = Effect.sync(() => synchronize(element, value.open, options));
+            if (value.open && options.modal !== false && !element.isConnected) {
+                pending = yield* Effect.forkScoped(Effect.andThen(whenConnected(element), update));
+            }
+            else {
+                // Complete connected transitions before queued native lifecycle events
+                // can reflect an older open state back into the application.
+                yield* update;
+            }
+        })));
+    });
+}
+// Template refs run before their host is inserted. Native showModal requires a connected element.
+function whenConnected(element) {
+    return Effect.callback((resume) => {
+        if (element.isConnected) {
+            resume(Effect.void);
+            return;
+        }
+        const check = () => {
+            if (element.isConnected)
+                resume(Effect.void);
+            else
+                frame = requestAnimationFrame(check);
+        };
+        let frame = requestAnimationFrame(check);
+        return Effect.sync(() => cancelAnimationFrame(frame));
+    });
+}
+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,43 @@
+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. 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.
+ *
+ * @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 Native synchronization
+ */
+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;AAExC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;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,CAqBnE"}

package/dist/NativePopover.js

@@ -0,0 +1,84 @@
+import * as Effect from "effect/Effect";
+import * as Fiber from "effect/Fiber";
+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. 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.
+ *
+ * @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 Native synchronization
+ */
+export function ref(state) {
+    return Effect.fn(function* (element) {
+        let pending;
+        yield* Effect.forkScoped(Fx.observe(state, Effect.fn(function* (value) {
+            if (pending !== undefined) {
+                const previous = pending;
+                pending = undefined;
+                yield* Fiber.interrupt(previous);
+            }
+            const update = Effect.sync(() => synchronize(element, value.open));
+            if (value.open && !element.isConnected) {
+                pending = yield* Effect.forkScoped(Effect.andThen(whenConnected(element), update));
+            }
+            else {
+                // Connected transitions stay in the observer: Menu/Select can focus
+                // their now-visible items immediately after updating open state.
+                yield* update;
+            }
+        })));
+    });
+}
+// Template refs run before insertion; native showPopover requires a connected host.
+function whenConnected(element) {
+    return Effect.callback((resume) => {
+        if (element.isConnected) {
+            resume(Effect.void);
+            return;
+        }
+        const check = () => {
+            if (element.isConnected)
+                resume(Effect.void);
+            else
+                frame = requestAnimationFrame(check);
+        };
+        let frame = requestAnimationFrame(check);
+        return Effect.sync(() => cancelAnimationFrame(frame));
+    });
+}
+function synchronize(element, open) {
+    if (open) {
+        if (!element.matches(":popover-open"))
+            element.showPopover();
+    }
+    else if (element.matches(":popover-open")) {
+        element.hidePopover();
+    }
+}