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

package/dist/Combobox.js

@@ -0,0 +1,371 @@
+/**
+ * Combobox keeps focus on its native input and exposes the active option through
+ * aria-activedescendant. Input, a manual native popover, and options share explicit value, open,
+ * and active state.
+ *
+ * @remarks
+ * The module keeps policy, state transitions, and DOM rendering separable so applications can use
+ * the state and pure operations without mounting UI, or supply custom hosts without replacing native
+ * events and browser-owned focus.
+ *
+ * @since 1.0.0
+ * @category modules
+ * @packageDocumentation
+ */
+import * as Effect from "effect/Effect";
+import * as Schema from "effect/Schema";
+import { RefSubject } from "@typed/fx";
+import { EventHandler, html, } from "@typed/template";
+import * as Collection from "./Collection.js";
+import * as Composite from "./Composite.js";
+import * as Dom from "./Dom.js";
+import * as NativePopover from "./NativePopover.js";
+/**
+ * Effect Schema used by makeState to encode, decode, and hydrate Combobox state.
+ *
+ * @remarks
+ * ## Why
+ *
+ * A public schema makes hydration and serialized state use the same runtime validation as direct
+ * construction.
+ *
+ * ## Ownership and lifetime
+ *
+ * This declaration is data or schema metadata and acquires no resources.
+ *
+ * @example
+ * ```ts
+ * import * as Schema from "effect/Schema";
+ * import * as Combobox from "@typed/ui/Combobox";
+ *
+ * const decodeState = Schema.decodeUnknownEffect(Combobox.StateSchema);
+ * ```
+ * @since 1.0.0
+ * @category schemas
+ */
+export const StateSchema = Schema.Struct({
+    id: Schema.String,
+    value: Schema.String,
+    open: Schema.Boolean,
+    activeId: Schema.NullOr(Schema.String),
+    orientation: Schema.Literals(["vertical"]),
+    loop: Schema.Boolean,
+    rtl: Schema.Boolean,
+    virtualFocus: Schema.Boolean,
+});
+/**
+ * Creates hydrated Combobox state. value defaults to an empty string, open to false, activeId to
+ * null, loop to true, and virtual focus is enabled.
+ *
+ * @remarks
+ * ## Why
+ *
+ * State and collection ownership can be composed and tested independently from any renderer.
+ *
+ * ## Ownership and lifetime
+ *
+ * The returned Effect creates the RefSubject when run. That state is renderer-independent;
+ * collection registrations belong to the separate Scope that runs register or ref, not to state
+ * creation.
+ *
+ * @example
+ * ```ts
+ * import * as Effect from "effect/Effect";
+ * import * as Combobox from "@typed/ui/Combobox";
+ *
+ * const program = Effect.scoped(
+ *   Effect.gen(function* () {
+ *     const state = yield* Combobox.makeState({ id: "city" });
+ *     const collection = yield* Combobox.makeCollection();
+ *     return { state: yield* state, collection: yield* collection };
+ *   }),
+ * );
+ * ```
+ * @since 1.0.0
+ * @category constructors
+ */
+export function makeState(initial) {
+    return RefSubject.hydrate(StateSchema, {
+        id: initial.id,
+        value: initial.value ?? "",
+        open: initial.open ?? false,
+        activeId: initial.activeId ?? null,
+        orientation: "vertical",
+        loop: initial.loop ?? true,
+        rtl: false,
+        virtualFocus: true,
+    });
+}
+/**
+ * Creates a scoped Collection for Combobox items.
+ *
+ * @remarks
+ * ## Why
+ *
+ * State and collection ownership can be composed and tested independently from any renderer.
+ *
+ * ## Ownership and lifetime
+ *
+ * The returned Effect allocates the RefSubject in the caller's Scope. Each later registration is
+ * owned by the Scope that runs register, independently of this construction Effect.
+ *
+ * @example
+ * ```ts
+ * import * as Effect from "effect/Effect";
+ * import * as Combobox from "@typed/ui/Combobox";
+ *
+ * const program = Effect.scoped(
+ *   Effect.gen(function* () {
+ *     const collection = yield* Combobox.makeCollection();
+ *     return yield* collection;
+ *   }),
+ * );
+ * ```
+ * @since 1.0.0
+ * @category constructors
+ */
+export const makeCollection = Collection.makeState;
+/**
+ * Stores the input value, clears activeId, and opens the popup in one state update.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The operation exposes Combobox's transition directly so callers can compose it in Effect
+ * programs and native event handlers.
+ *
+ * ## Ownership and lifetime
+ *
+ * The returned Effect performs the update or DOM side effect only when run, preserves the declared
+ * error and service channels, and retains no resources after completion.
+ *
+ * ## Example
+ *
+ * Import with `import { setValue } from "@typed/ui/Combobox";` Extend the [Combobox.makeState
+ * runnable setup](/reference/%40typed%2Fui%2FCombobox%23makeState). Inside the linked Effect
+ * program invoke `yield* setValue(state, "New York")`, then read state to observe that value,
+ * `activeId: null`, and `open: true`.
+ * @since 1.0.0
+ * @category combinators
+ */
+export function setValue(state, value) {
+    return RefSubject.update(state, (current) => ({ ...current, value, activeId: null, open: true }));
+}
+function openPopover(state, collection) {
+    return Effect.gen(function* () {
+        const current = yield* state;
+        const item = collection === undefined
+            ? undefined
+            : visibleItems(yield* collection).find((item) => item.value === current.value);
+        const next = yield* RefSubject.update(state, (value) => ({
+            ...value,
+            activeId: item?.id ?? value.activeId,
+            open: true,
+        }));
+        if (item !== undefined && collection !== undefined) {
+            yield* Composite.scrollActive({ state, collection });
+        }
+        return next;
+    });
+}
+function move(state, collection, direction) {
+    return Effect.gen(function* () {
+        const next = Composite.moveActiveId(visibleItems(yield* collection), yield* state, direction);
+        if (next === null)
+            return yield* state;
+        return yield* RefSubject.update(state, (current) => ({ ...current, activeId: next }));
+    });
+}
+function select(state, id, value) {
+    return RefSubject.update(state, (current) => ({ ...current, activeId: id, value, open: false }));
+}
+function selectActive(state, collection) {
+    return Effect.gen(function* () {
+        const activeId = (yield* state).activeId;
+        const item = activeId === null ? undefined : (yield* collection).find((item) => item.id === activeId);
+        return item?.value === undefined ? yield* state : yield* select(state, item.id, item.value);
+    });
+}
+function inputProps(options) {
+    const id = RefSubject.map(options.state, (state) => state.id);
+    const inputId = RefSubject.map(options.state, (state) => `${state.id}-input`);
+    const open = RefSubject.map(options.state, (state) => state.open);
+    const onkeydown = options.collection === undefined
+        ? undefined
+        : EventHandler.make(Effect.fn(function* (event) {
+            const direction = event.key === "ArrowDown" ? "next" : event.key === "ArrowUp" ? "previous" : undefined;
+            if (direction !== undefined) {
+                event.preventDefault();
+                if (!(yield* options.state).open) {
+                    yield* openPopover(options.state, options.collection);
+                }
+                yield* move(options.state, options.collection, direction);
+                yield* Composite.scrollActive({
+                    state: options.state,
+                    collection: options.collection,
+                });
+                return;
+            }
+            if (event.key === "Enter") {
+                if ((yield* options.state).activeId === null)
+                    return;
+                event.preventDefault();
+                yield* selectActive(options.state, options.collection);
+                return;
+            }
+            if (event.key === "Escape") {
+                yield* RefSubject.update(options.state, (state) => ({ ...state, open: false }));
+            }
+        }));
+    return () => ({
+        id: inputId,
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-controls": id,
+        "aria-expanded": open,
+        "aria-activedescendant": Composite.activeDescendant(options.state),
+        placeholder: options.placeholder,
+        ".value": RefSubject.map(options.state, (state) => state.value),
+        oninput: EventHandler.make(Effect.fn((event) => setValue(options.state, Dom.currentTarget(event).value))),
+        onfocus: openPopover(options.state, options.collection),
+        onkeydown,
+    });
+}
+function visibleItems(collection) {
+    return Collection.byDomOrder(collection).filter((item) => item.element === undefined || item.element.closest("[hidden]") === null);
+}
+/**
+ * Renders the native combobox input, keeps its value property synchronized, opens on focus, and
+ * handles Arrow, Enter, and Escape when a collection is supplied.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The component applies the family behavior while leaving callers free to supply a custom host
+ * through the shared DOM boundary.
+ *
+ * ## Ownership and lifetime
+ *
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * ## Example
+ *
+ * Import with `import { Input } from "@typed/ui/Combobox";` Extend the [Combobox.makeState runnable
+ * setup](/reference/%40typed%2Fui%2FCombobox%23makeState). Replace the linked program's final
+ * snapshot read with `Input({ state, placeholder: "Choose a city" })`; render that Fx before the
+ * same Scope closes.
+ * @since 1.0.0
+ * @category components
+ */
+export function Input(options, host) {
+    return Dom.renderHost()(options, host, inputProps(options), "", (props) => html `<input ...${props} />`);
+}
+function popoverProps(options) {
+    const id = RefSubject.map(options.state, (state) => state.id);
+    const inputId = RefSubject.map(options.state, (state) => `${state.id}-input`);
+    return () => ({
+        id,
+        role: "listbox",
+        "aria-labelledby": inputId,
+        popover: "manual",
+        ontoggle: EventHandler.make(Effect.fn(function* (event) {
+            const open = Dom.toggleState(event) === "open";
+            const current = yield* options.state;
+            if (current.open === open)
+                return current;
+            const next = yield* RefSubject.update(options.state, (state) => ({ ...state, open }));
+            if (!open || options.collection === undefined)
+                return next;
+            const item = (yield* options.collection).find((item) => item.value === next.value);
+            if (item === undefined)
+                return next;
+            const selected = yield* RefSubject.update(options.state, (state) => ({
+                ...state,
+                activeId: item.id,
+            }));
+            yield* Composite.scrollActive({ state: options.state, collection: options.collection });
+            return selected;
+        })),
+        ref: Dom.composeRefs(options.state, NativePopover.ref(options.state)),
+    });
+}
+/**
+ * Renders manual-popover listbox content, mirrors native toggle events into open state, and
+ * scrolls the selected option when opened.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The component applies the family behavior while leaving callers free to supply a custom host
+ * through the shared DOM boundary.
+ *
+ * ## Ownership and lifetime
+ *
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * ## Example
+ *
+ * Import with `import { Popover } from "@typed/ui/Combobox";` Extend the [Combobox.makeState
+ * runnable setup](/reference/%40typed%2Fui%2FCombobox%23makeState). Replace the linked program's
+ * final snapshot read with `Popover({ state, content: "Cities" })`; render that Fx before the same
+ * Scope closes.
+ * @since 1.0.0
+ * @category components
+ */
+export function Popover(options, host) {
+    return Dom.renderHost()(options, host, popoverProps(options), options.content, (props, content) => {
+        return html `<div ...${props}>${content}</div>`;
+    });
+}
+function itemProps(options) {
+    const selected = RefSubject.map(options.state, (state) => state.value === options.value);
+    const register = options.collection === undefined
+        ? undefined
+        : Collection.ref(options.collection, {
+            id: options.id,
+            value: options.value,
+            textValue: options.textValue ?? options.value,
+            disabled: options.disabled,
+        });
+    return () => ({
+        id: options.id,
+        role: "option",
+        "aria-selected": selected,
+        "aria-disabled": options.disabled ?? false,
+        tabindex: Composite.tabIndex(options.state, options.id),
+        onclick: options.disabled === true ? Effect.void : select(options.state, options.id, options.value),
+        ref: Dom.composeRefs(register, options.ref),
+    });
+}
+/**
+ * Renders and optionally registers one option; disabled options expose aria-disabled and do not
+ * select on click.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The component applies the family behavior while leaving callers free to supply a custom host
+ * through the shared DOM boundary.
+ *
+ * ## Ownership and lifetime
+ *
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
+ * collection registrations only when rendered. The rendering Scope removes those resources;
+ * unrelated nodes and attributes remain caller-owned.
+ *
+ * ## Example
+ *
+ * Import with `import { Item } from "@typed/ui/Combobox";` Extend the [Combobox.makeState runnable
+ * setup](/reference/%40typed%2Fui%2FCombobox%23makeState). Replace the linked program's final
+ * snapshot read with `Item({ state, id: "nyc", value: "New York", content: "New York" })`; render
+ * that Fx before the same Scope closes.
+ * @since 1.0.0
+ * @category components
+ */
+export function Item(options, host) {
+    return Dom.renderHost()(options, host, itemProps(options), options.content, (props, content) => html `<div ...${props}>${content}</div>`);
+}

package/dist/Component.d.ts

@@ -0,0 +1,127 @@
+import type * as Effect from "effect/Effect";
+import { Fx } from "@typed/fx";
+import { type Renderable } from "@typed/template";
+type ComponentFx<Yield extends Effect.Effect<any, any, any>, Result extends Renderable.Any> = [
+    Fx.Fx<Renderable.Success<Result>, Effect.Error<Yield> | Renderable.Error<Result>, Effect.Services<Yield> | Renderable.Services<Result>>
+] extends [Fx.Fx<infer Success, infer Error, infer Services>] ? Fx.Fx<Success, Error, Services> : never;
+type ComponentResult<Args extends ReadonlyArray<any>, Result> = Args extends readonly [] ? Result : (...args: Args) => Result;
+/**
+ * Type-level contracts used by the `component` constructor.
+ *
+ * @remarks
+ * ## Why
+ *
+ * The namespace keeps the overload-rich generator contract attached to the
+ * callable constructor while still making it available to library authors who
+ * wrap `component`.
+ *
+ * ## Ownership and lifetime
+ *
+ * These types acquire nothing. The `Fx` produced by `component` is lazy; its
+ * running Effect `Scope` owns yielded effects, subscriptions, and cleanup.
+ *
+ * @since 1.0.0
+ * @category models
+ */
+export declare namespace component {
+    /**
+     * The overloaded callable type of `component`.
+     *
+     * @remarks
+     * ## Why
+     *
+     * `Gen` preserves argument, error, and service inference across generator
+     * components and optional post-construction pipe functions. A zero-argument
+     * body returns an `Fx`; a body with arguments returns a component function.
+     *
+     * ## Ownership and lifetime
+     *
+     * Calling a `Gen` value constructs a lazy `Fx` and starts no work. Resources
+     * yielded by the generator belong to the Scope that eventually runs that Fx.
+     *
+     * @example
+     * ```ts
+     * import { component } from "@typed/ui/Component"
+     * import { html } from "@typed/template"
+     *
+     * const define: component.Gen = component
+     * const Greeting = define(function* (name: string) {
+     *   return html`<p>Hello ${name}</p>`
+     * })
+     * ```
+     *
+     * @since 1.0.0
+     * @category models
+     */
+    type Gen = {
+        /** Creates a component directly for a zero-argument body. @since 1.0.0 @category constructors */
+        <Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any>(body: () => Generator<Yield, Result, any>): ComponentFx<Yield, Result>;
+        /** Creates a component function while preserving the generator's parameters. @since 1.0.0 @category constructors */
+        <Args extends readonly [any, ...ReadonlyArray<any>], Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any>(body: (...args: Args) => Generator<Yield, Result, any>): (...args: Args) => ComponentFx<Yield, Result>;
+        /** Applies one argument-aware transformation to the generated Fx. @since 1.0.0 @category constructors */
+        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A): ComponentResult<Args, A>;
+        /** Applies two ordered argument-aware transformations to the generated Fx. @since 1.0.0 @category constructors */
+        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B): ComponentResult<Args, B>;
+        /** Applies three ordered argument-aware transformations to the generated Fx. @since 1.0.0 @category constructors */
+        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C): ComponentResult<Args, C>;
+        /** Applies four ordered argument-aware transformations to the generated Fx. @since 1.0.0 @category constructors */
+        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C, D>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C, d: (_: C, ...args: Args) => D): ComponentResult<Args, D>;
+        /** Applies five ordered argument-aware transformations to the generated Fx. @since 1.0.0 @category constructors */
+        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C, D, E>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C, d: (_: C, ...args: Args) => D, e: (_: D, ...args: Args) => E): ComponentResult<Args, E>;
+        /** Applies six ordered argument-aware transformations to the generated Fx. @since 1.0.0 @category constructors */
+        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C, D, E, F>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C, d: (_: C, ...args: Args) => D, e: (_: D, ...args: Args) => E, f: (_: E, ...args: Args) => F): ComponentResult<Args, F>;
+        /** Applies seven ordered argument-aware transformations to the generated Fx. @since 1.0.0 @category constructors */
+        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C, D, E, F, G>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C, d: (_: C, ...args: Args) => D, e: (_: D, ...args: Args) => E, f: (_: E, ...args: Args) => F, g: (_: F, ...args: Args) => G): ComponentResult<Args, G>;
+        /** Applies eight ordered argument-aware transformations to the generated Fx. @since 1.0.0 @category constructors */
+        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C, D, E, F, G, H>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C, d: (_: C, ...args: Args) => D, e: (_: D, ...args: Args) => E, f: (_: E, ...args: Args) => F, g: (_: F, ...args: Args) => G, h: (_: G, ...args: Args) => H): ComponentResult<Args, H>;
+        /** Applies nine ordered argument-aware transformations to the generated Fx. @since 1.0.0 @category constructors */
+        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C, D, E, F, G, H, I>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C, d: (_: C, ...args: Args) => D, e: (_: D, ...args: Args) => E, f: (_: E, ...args: Args) => F, g: (_: F, ...args: Args) => G, h: (_: G, ...args: Args) => H, i: (_: H, ...args: Args) => I): ComponentResult<Args, I>;
+        /** Applies ten ordered argument-aware transformations to the generated Fx. @since 1.0.0 @category constructors */
+        <Args extends ReadonlyArray<any>, Yield extends Effect.Effect<any, any, any>, const Result extends Renderable.Any, A, B, C, D, E, F, G, H, I, J>(body: (...args: Args) => Generator<Yield, Result, any>, a: (_: ComponentFx<Yield, Result>, ...args: Args) => A, b: (_: A, ...args: Args) => B, c: (_: B, ...args: Args) => C, d: (_: C, ...args: Args) => D, e: (_: D, ...args: Args) => E, f: (_: E, ...args: Args) => F, g: (_: F, ...args: Args) => G, h: (_: G, ...args: Args) => H, i: (_: H, ...args: Args) => I, j: (_: I, ...args: Args) => J): ComponentResult<Args, J>;
+    };
+}
+/**
+ * Creates an Fx component from a generator that may return any Renderable. A
+ * zero-arity generator creates an Fx directly; generators with parameters
+ * create an Fx function. Additional functions are piped over the generated Fx
+ * using the same argument-forwarding behavior as Fx.fn.
+ *
+ * @remarks
+ * ## Why
+ *
+ * Components often need Effect services before they can return a template,
+ * DOM node, render event, or other `Renderable`. This constructor turns that
+ * generator into a single `Fx<RenderEvent, E, R>` boundary without introducing
+ * a component tree or a second runtime beside Effect.
+ *
+ * ## Ownership and lifetime
+ *
+ * Construction is lazy. Each run evaluates the generator inside the running
+ * Fx's Effect lifetime; interruption and Scope finalization release everything
+ * acquired by yielded effects and by the returned renderable. The constructor
+ * does not own DOM outside the render events emitted by that renderable.
+ *
+ * ## Composition
+ *
+ * A parameterless generator returns an Fx directly. A generator with
+ * parameters returns a function, and optional pipe functions receive the
+ * generated Fx followed by the original arguments, matching `Fx.fn`.
+ *
+ * @example
+ * ```ts
+ * import { component } from "@typed/ui/Component"
+ * import { html } from "@typed/template"
+ * import { Effect } from "effect"
+ *
+ * const Greeting = component(function* (name: string) {
+ *   const greeting = yield* Effect.succeed("Hello")
+ *   return html`<p>${greeting} ${name}</p>`
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category constructors
+ */
+export declare const component: component.Gen;
+export {};
+//# sourceMappingURL=Component.d.ts.map

package/dist/Component.d.ts.map

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

package/dist/Component.js

@@ -0,0 +1,60 @@
+import { Fx } from "@typed/fx";
+import { liftRenderableToFx } from "@typed/template";
+/**
+ * Creates an Fx component from a generator that may return any Renderable. A
+ * zero-arity generator creates an Fx directly; generators with parameters
+ * create an Fx function. Additional functions are piped over the generated Fx
+ * using the same argument-forwarding behavior as Fx.fn.
+ *
+ * @remarks
+ * ## Why
+ *
+ * Components often need Effect services before they can return a template,
+ * DOM node, render event, or other `Renderable`. This constructor turns that
+ * generator into a single `Fx<RenderEvent, E, R>` boundary without introducing
+ * a component tree or a second runtime beside Effect.
+ *
+ * ## Ownership and lifetime
+ *
+ * Construction is lazy. Each run evaluates the generator inside the running
+ * Fx's Effect lifetime; interruption and Scope finalization release everything
+ * acquired by yielded effects and by the returned renderable. The constructor
+ * does not own DOM outside the render events emitted by that renderable.
+ *
+ * ## Composition
+ *
+ * A parameterless generator returns an Fx directly. A generator with
+ * parameters returns a function, and optional pipe functions receive the
+ * generated Fx followed by the original arguments, matching `Fx.fn`.
+ *
+ * @example
+ * ```ts
+ * import { component } from "@typed/ui/Component"
+ * import { html } from "@typed/template"
+ * import { Effect } from "effect"
+ *
+ * const Greeting = component(function* (name: string) {
+ *   const greeting = yield* Effect.succeed("Hello")
+ *   return html`<p>${greeting} ${name}</p>`
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category constructors
+ */
+export const component = function (body, ...pipeables) {
+    if (body.length === 0) {
+        let result = Fx.gen(function* () {
+            const renderable = yield* body();
+            return liftRenderableToFx(renderable);
+        });
+        for (const pipeable of pipeables) {
+            result = pipeable(result);
+        }
+        return result;
+    }
+    return Fx.fn(function* (...args) {
+        const renderable = yield* body(...args);
+        return liftRenderableToFx(renderable);
+    }, ...pipeables);
+};