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

package/dist/Heading.js

@@ -0,0 +1,48 @@
+import { html } from "@typed/template";
+import * as Dom from "./Dom.js";
+function internalProps({ property, }) {
+    return { role: "heading", "aria-level": property("level", 1) };
+}
+/**
+ * Renders a host with `role="heading"` and a reactive `aria-level`.
+ * @remarks
+ * ## Why
+ * The primitive lets a design system preserve document-outline semantics when
+ * its visual host cannot be selected statically.
+ * ## Ownership and lifetime
+ * Running the returned Fx owns its dynamic attributes and content in an Effect
+ * Scope. A custom host must preserve `role` and `aria-level`.
+ * @example
+ * ```ts
+ * import { Heading } from "@typed/ui/Heading"
+ *
+ * const title = Heading({ level: 3, content: "Details" })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export function Heading(options, host) {
+    return Dom.renderHost()(options, host, internalProps, options.content, (props, content) => html `<div ...${props}>${content}</div>`);
+}
+/**
+ * Alias for `Heading` retained for level-oriented imports.
+ * @remarks
+ * ## Why
+ * The alias names the role the component plays in a contextual heading system.
+ * ## Ownership and lifetime
+ * It has exactly the same Scope and host ownership as `Heading`.
+ * @since 1.0.0
+ * @category aliases
+ */
+export const Level = Heading;
+/**
+ * Descriptive alias for `Heading`.
+ * @remarks
+ * ## Why
+ * The name remains available without duplicating an implementation contract.
+ * ## Ownership and lifetime
+ * It has exactly the same Scope and host ownership as `Heading`.
+ * @since 1.0.0
+ * @category aliases
+ */
+export const HeadingLevel = Heading;

package/dist/Hovercard.d.ts

@@ -0,0 +1,297 @@
+import * as Effect from "effect/Effect";
+import type * as Scope from "effect/Scope";
+import * as Schema from "effect/Schema";
+import type { Fx } from "@typed/fx/Fx";
+import { RefSubject } from "@typed/fx";
+import { EventHandler, type Renderable, type RenderEvent, type RenderTemplate } from "@typed/template";
+import * as Dom from "./Dom.js";
+import type { HostResult } from "./Dom/Types.js";
+/** Current hovercard identity and visibility.
+ * @remarks
+ * ## Why
+ * A stable id links the anchor to focusable native popover content while state
+ * remains renderer-independent.
+ * ## Ownership and lifetime
+ * Plain data retains no resources; RefSubject observation is Scope-owned.
+ * @since 1.0.0
+ * @category state
+ */
+export interface State {
+    /** Stable id used by `aria-controls` and content.
+     * @remarks
+     * ## Why
+     * Deterministic identity preserves server/client DOM relationships.
+     * ## Ownership and lifetime
+     * Plain data acquires no resources.
+     * @since 1.0.0
+     * @category relationships
+     */
+    readonly id: string;
+    /** Whether the hovercard is open.
+     * @remarks
+     * ## Why
+     * One value coordinates delayed interactions and native popover state.
+     * ## Ownership and lifetime
+     * Plain data acquires no resources.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly open: boolean;
+}
+/** Initial hovercard identity and visibility.
+ * @remarks
+ * ## Why
+ * Requiring an id makes the anchor/content relationship explicit.
+ * ## Ownership and lifetime
+ * Configuration is inert.
+ * @since 1.0.0
+ * @category state
+ */
+export interface InitialState {
+    /** Stable content id.
+     * @remarks
+     * ## Why
+     * Explicit ids prevent hydration relationship drift.
+     * ## Ownership and lifetime
+     * Plain data retains no resources.
+     * @since 1.0.0
+     * @category relationships
+     */
+    readonly id: string;
+    /** Initial visibility, defaulting to false.
+     * @remarks
+     * ## Why
+     * Closed is deterministic before focus or hover interaction.
+     * ## Ownership and lifetime
+     * Plain data retains no resources.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly open?: boolean;
+}
+/** Schema for hovercard hydration state.
+ * @remarks
+ * ## Why
+ * Shared identity/open encoding keeps SSR and browser state compatible.
+ * ## Ownership and lifetime
+ * The immutable schema acquires no resources.
+ * @since 1.0.0
+ * @category schemas
+ */
+export declare const StateSchema: Schema.Struct<{
+    readonly id: Schema.String;
+    readonly open: Schema.Boolean;
+}>;
+/** Creates hydrated hovercard state.
+ * @remarks
+ * ## Why
+ * Visibility and identity can be tested without mounting UI.
+ * ## Ownership and lifetime
+ * The calling Effect Scope owns the returned RefSubject.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Hovercard from "@typed/ui/Hovercard"
+ *
+ * const program = Effect.gen(function* () {
+ *   return yield* Hovercard.makeState({ id: "author-card" })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category constructors
+ */
+export declare function makeState(initial: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
+    readonly id: string;
+    readonly open: boolean;
+}, Schema.SchemaError, never, never>, never, Scope.Scope>;
+/** Sets hovercard visibility.
+ * @remarks
+ * ## Why
+ * Delayed focus/hover flows converge on one atomic state update.
+ * ## Ownership and lifetime
+ * The Effect uses the existing RefSubject lifetime and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Hovercard from "@typed/ui/Hovercard"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Hovercard.makeState({ id: "author-card" })
+ *   yield* Hovercard.setOpen(state, true)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export declare function setOpen<E, R>(state: RefSubject.RefSubject<State, E, R>, open: boolean): Effect.Effect<State, E, R>;
+/** Options for a hovercard anchor host.
+ * @remarks
+ * ## Why
+ * Pointer entry works with the default span. Keyboard focus behavior requires
+ * the host itself to be focusable, for example `props: { tabindex: 0 }` or a
+ * focusable custom host; focus and blur on descendants do not bubble to it.
+ * ## Ownership and lifetime
+ * Options are inert; rendering owns handlers/delayed effects by Scope.
+ * @since 1.0.0
+ * @category models
+ */
+export interface AnchorOptions extends Dom.HostOptions<HTMLSpanElement> {
+    /** Hydrated state shared with hovercard content.
+     * @remarks
+     * ## Why
+     * Its id and open state coordinate the whole compound widget.
+     * ## Ownership and lifetime
+     * The anchor borrows state; its original Scope owns it.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
+    /** Anchor content.
+     * @remarks
+     * ## Why
+     * The wrapper retains nested content, but focusable descendants do not
+     * activate the default span's non-bubbling focus and blur handlers.
+     * ## Ownership and lifetime
+     * Dynamic content follows the anchor Scope.
+     * @since 1.0.0
+     * @category content
+     */
+    readonly content: Renderable.Any;
+    /** Milliseconds before opening.
+     * @remarks
+     * ## Why
+     * Delay filters incidental pointer transit.
+     * ## Ownership and lifetime
+     * New schedules invalidate older delayed updates.
+     * @since 1.0.0
+     * @category timing
+     */
+    readonly showDelay?: number;
+    /** Milliseconds before closing.
+     * @remarks
+     * ## Why
+     * Delay gives users time to move focus or pointer toward content.
+     * ## Ownership and lifetime
+     * New schedules invalidate older delayed updates.
+     * @since 1.0.0
+     * @category timing
+     */
+    readonly hideDelay?: number;
+}
+declare function anchorInternalProps<const Options extends AnchorOptions>(options: Options): () => {
+    readonly "aria-controls": RefSubject.Computed<string, Schema.SchemaError, never>;
+    readonly onfocus: Effect.Effect<void, Schema.SchemaError, never>;
+    readonly onblur: EventHandler.EventHandler<FocusEvent, Schema.SchemaError, never>;
+    readonly onkeydown: EventHandler.EventHandler<KeyboardEvent, Schema.SchemaError, never>;
+    readonly onmouseenter: Effect.Effect<void, Schema.SchemaError, never>;
+    readonly onmouseleave: Effect.Effect<void, Schema.SchemaError, never>;
+};
+type AnchorInternalProps<Options extends AnchorOptions> = ReturnType<ReturnType<typeof anchorInternalProps<Options>>>;
+/** Renders an anchor coordinating pointer and optional host-focus behavior.
+ * @remarks
+ * ## Why
+ * The default host is a non-focusable `<span>`, so it provides pointer behavior
+ * only. Give the span `tabindex`, or supply a natively focusable custom host,
+ * for direct focus, blur, and keydown handling. Unlike a tooltip, hovercard
+ * content may receive focus; host blur checks `relatedTarget` and stays open
+ * while focus moves inside the card. Nested-anchor focus does not bubble.
+ * ## Ownership and lifetime
+ * Running the Fx owns real DOM handlers and dynamic relationships in its Scope.
+ * Custom hosts must preserve `aria-controls` and all supplied handlers.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Hovercard from "@typed/ui/Hovercard"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Hovercard.makeState({ id: "author-card" })
+ *   return Hovercard.Anchor({
+ *     state,
+ *     content: "Ada Lovelace",
+ *     props: { tabindex: 0 }
+ *   })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export declare function Anchor<const Options extends AnchorOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, AnchorInternalProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
+interface ContentOptionsBase extends Dom.HostOptions<HTMLDivElement> {
+    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
+    readonly content: Renderable.Any;
+}
+type AccessibleName = {
+    readonly label: Renderable.Any<string | null | undefined>;
+    readonly labelledBy?: never;
+} | {
+    readonly label?: never;
+    readonly labelledBy: Renderable.Any<string | null | undefined>;
+};
+/** Hovercard content options requiring one accessible naming strategy.
+ * @remarks
+ * ## Why
+ * Focusable dialog-like content needs an explicit name; the type makes label
+ * and labelled-by mutually exclusive.
+ *
+ * ## Options
+ *
+ * `state` provides the stable content id and open state, while `content` may
+ * contain focusable output. `label` names the card directly; `labelledBy`
+ * references visible naming content. Supplying both is rejected by the type.
+ * ## Ownership and lifetime
+ * Options are inert; rendering owns content/listeners/native ref by Scope.
+ * @since 1.0.0
+ * @category models
+ */
+export type ContentOptions = ContentOptionsBase & AccessibleName;
+declare function contentInternalProps<const Options extends ContentOptions>(options: Options): ({ property }: Dom.InternalPropsHelpers<Options>) => {
+    readonly id: RefSubject.Computed<string, Schema.SchemaError, never>;
+    readonly role: "dialog";
+    readonly "aria-label": Exclude<Dom.Property<Options, "label">, Dom.Nullish> | undefined;
+    readonly "aria-labelledby": Exclude<Dom.Property<Options, "labelledBy">, Dom.Nullish> | undefined;
+    readonly popover: "manual";
+    readonly onfocusin: Effect.Effect<void, Schema.SchemaError, never>;
+    readonly onfocusout: EventHandler.EventHandler<FocusEvent, Schema.SchemaError, never>;
+    readonly onmouseenter: Effect.Effect<void, Schema.SchemaError, never>;
+    readonly onmouseleave: EventHandler.EventHandler<MouseEvent, Schema.SchemaError, never>;
+    readonly onkeydown: EventHandler.EventHandler<KeyboardEvent, Schema.SchemaError, never>;
+    readonly ontoggle: EventHandler.EventHandler<Event, Schema.SchemaError, never>;
+    readonly ref: import("./Dom/Refs.js").ComposedRef<RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>, (element: HTMLElement) => Effect.Effect<void, Schema.SchemaError, Scope.Scope>> | undefined;
+};
+type ContentInternalProps<Options extends ContentOptions> = ReturnType<ReturnType<typeof contentInternalProps<Options>>>;
+/** Renders named, focusable hovercard content in the native top layer.
+ * @remarks
+ * ## Why
+ * `role="dialog"` distinguishes interactive content from a tooltip. Native
+ * popover placement is retained, and focus/pointer transitions prevent closing
+ * while interaction remains inside the card.
+ * ## Ownership and lifetime
+ * Running the Fx owns handlers and NativePopover observation in its Scope. A
+ * custom host must preserve id, role, accessible name, manual popover,
+ * lifecycle handlers, and one hydration ref owner.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Hovercard from "@typed/ui/Hovercard"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Hovercard.makeState({ id: "author-card" })
+ *   return Hovercard.Content({ state, label: "Author", content: "Mathematician" })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+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>;
+/** Canonical widget alias for `Content`.
+ * @remarks
+ * ## Why
+ * The alias provides the widget name while `Content` names compound use.
+ * ## Ownership and lifetime
+ * It has exactly the same Scope and native popover ownership as `Content`.
+ * @since 1.0.0
+ * @category aliases
+ */
+export declare const Hovercard: typeof Content;
+export {};
+//# sourceMappingURL=Hovercard.d.ts.map

package/dist/Hovercard.d.ts.map

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

package/dist/Hovercard.js

@@ -0,0 +1,188 @@
+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 Dom from "./Dom.js";
+import * as NativePopover from "./NativePopover.js";
+/** Schema for hovercard hydration state.
+ * @remarks
+ * ## Why
+ * Shared identity/open encoding keeps SSR and browser state compatible.
+ * ## Ownership and lifetime
+ * The immutable schema acquires no resources.
+ * @since 1.0.0
+ * @category schemas
+ */
+export const StateSchema = Schema.Struct({ id: Schema.String, open: Schema.Boolean });
+/** Creates hydrated hovercard state.
+ * @remarks
+ * ## Why
+ * Visibility and identity can be tested without mounting UI.
+ * ## Ownership and lifetime
+ * The calling Effect Scope owns the returned RefSubject.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Hovercard from "@typed/ui/Hovercard"
+ *
+ * const program = Effect.gen(function* () {
+ *   return yield* Hovercard.makeState({ id: "author-card" })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category constructors
+ */
+export function makeState(initial) {
+    return RefSubject.hydrate(StateSchema, { id: initial.id, open: initial.open ?? false });
+}
+/** Sets hovercard visibility.
+ * @remarks
+ * ## Why
+ * Delayed focus/hover flows converge on one atomic state update.
+ * ## Ownership and lifetime
+ * The Effect uses the existing RefSubject lifetime and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Hovercard from "@typed/ui/Hovercard"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Hovercard.makeState({ id: "author-card" })
+ *   yield* Hovercard.setOpen(state, true)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export function setOpen(state, open) {
+    return RefSubject.update(state, (current) => ({ ...current, open }));
+}
+const scheduleVersions = new WeakMap();
+const scheduleOpen = Effect.fn(function* (state, open, delay) {
+    const version = (scheduleVersions.get(state) ?? 0) + 1;
+    scheduleVersions.set(state, version);
+    if (delay > 0)
+        yield* Effect.sleep(delay);
+    if (scheduleVersions.get(state) === version)
+        yield* setOpen(state, open);
+});
+function anchorInternalProps(options) {
+    const id = RefSubject.map(options.state, (state) => state.id);
+    return () => ({
+        "aria-controls": id,
+        onfocus: scheduleOpen(options.state, true, options.showDelay ?? 0),
+        onblur: EventHandler.make(Effect.fn(function* (event) {
+            const contentId = (yield* options.state).id;
+            const content = Dom.currentTarget(event).ownerDocument.getElementById(contentId);
+            if (event.relatedTarget instanceof Node && content?.contains(event.relatedTarget))
+                return;
+            yield* scheduleOpen(options.state, false, options.hideDelay ?? 0);
+        })),
+        onkeydown: EventHandler.make(Effect.fn(function* (event) {
+            if (event.key === "Escape")
+                yield* scheduleOpen(options.state, false, 0);
+        })),
+        onmouseenter: scheduleOpen(options.state, true, options.showDelay ?? 0),
+        onmouseleave: scheduleOpen(options.state, false, options.hideDelay ?? 0),
+    });
+}
+/** Renders an anchor coordinating pointer and optional host-focus behavior.
+ * @remarks
+ * ## Why
+ * The default host is a non-focusable `<span>`, so it provides pointer behavior
+ * only. Give the span `tabindex`, or supply a natively focusable custom host,
+ * for direct focus, blur, and keydown handling. Unlike a tooltip, hovercard
+ * content may receive focus; host blur checks `relatedTarget` and stays open
+ * while focus moves inside the card. Nested-anchor focus does not bubble.
+ * ## Ownership and lifetime
+ * Running the Fx owns real DOM handlers and dynamic relationships in its Scope.
+ * Custom hosts must preserve `aria-controls` and all supplied handlers.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Hovercard from "@typed/ui/Hovercard"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Hovercard.makeState({ id: "author-card" })
+ *   return Hovercard.Anchor({
+ *     state,
+ *     content: "Ada Lovelace",
+ *     props: { tabindex: 0 }
+ *   })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export function Anchor(options, host) {
+    return Dom.renderHost()(options, host, anchorInternalProps(options), options.content, (props, content) => html `<span ...${props}>${content}</span>`);
+}
+function contentInternalProps(options) {
+    const id = RefSubject.map(options.state, (state) => state.id);
+    return ({ property }) => ({
+        id,
+        role: "dialog",
+        "aria-label": property("label", undefined),
+        "aria-labelledby": property("labelledBy", undefined),
+        popover: "manual",
+        onfocusin: scheduleOpen(options.state, true, 0),
+        onfocusout: EventHandler.make(Effect.fn(function* (event) {
+            const content = Dom.currentTarget(event);
+            if (event.relatedTarget instanceof Node && content.contains(event.relatedTarget))
+                return;
+            yield* scheduleOpen(options.state, false, 0);
+        })),
+        onmouseenter: scheduleOpen(options.state, true, 0),
+        onmouseleave: EventHandler.make(Effect.fn(function* (event) {
+            const contentId = (yield* options.state).id;
+            if (event.relatedTarget instanceof Element &&
+                event.relatedTarget.getAttribute("aria-controls") === contentId)
+                return;
+            yield* scheduleOpen(options.state, false, 0);
+        })),
+        onkeydown: EventHandler.make(Effect.fn(function* (event) {
+            if (event.key === "Escape")
+                yield* scheduleOpen(options.state, false, 0);
+        })),
+        ontoggle: EventHandler.make(Effect.fn((event) => setOpen(options.state, Dom.toggleState(event) === "open"))),
+        ref: Dom.composeRefs(options.state, NativePopover.ref(options.state)),
+    });
+}
+/** Renders named, focusable hovercard content in the native top layer.
+ * @remarks
+ * ## Why
+ * `role="dialog"` distinguishes interactive content from a tooltip. Native
+ * popover placement is retained, and focus/pointer transitions prevent closing
+ * while interaction remains inside the card.
+ * ## Ownership and lifetime
+ * Running the Fx owns handlers and NativePopover observation in its Scope. A
+ * custom host must preserve id, role, accessible name, manual popover,
+ * lifecycle handlers, and one hydration ref owner.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Hovercard from "@typed/ui/Hovercard"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Hovercard.makeState({ id: "author-card" })
+ *   return Hovercard.Content({ state, label: "Author", content: "Mathematician" })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export function Content(options, host) {
+    return Dom.renderHost()(options, host, contentInternalProps(options), options.content, (i, content) => {
+        return html `<div ...${i}>${content}</div>`;
+    });
+}
+/** Canonical widget alias for `Content`.
+ * @remarks
+ * ## Why
+ * The alias provides the widget name while `Content` names compound use.
+ * ## Ownership and lifetime
+ * It has exactly the same Scope and native popover ownership as `Content`.
+ * @since 1.0.0
+ * @category aliases
+ */
+export const Hovercard = Content;

package/dist/HttpRouter.d.ts

@@ -1,13 +1,136 @@
 import * as Effect from "effect/Effect";
-import * as Scope from "effect/Scope";
-import { type HttpRouter } from "effect/unstable/http/HttpRouter";
+import { type HttpRouter, type Provided as HttpRouterProvided, type Request as HttpRouterRequest } from "effect/unstable/http/HttpRouter";
+import * as HttpServerError from "effect/unstable/http/HttpServerError";
 import { type Matcher, type Router } from "@typed/router";
+import { type Navigation } from "@typed/navigation";
 import { type RenderEvent } from "@typed/template";
-type ProvidedForSsr = Scope.Scope | Router;
+type ProvidedForSsr = HttpRouterProvided | Navigation | Router;
+type SsrForHttpRequirement<E, R> = Exclude<R, ProvidedForSsr> | HttpRouterRequest.From<"Error", E | HttpServerError.HttpServerError>;
+type SsrForHttpEffect<E, R> = Effect.Effect<void, never, SsrForHttpRequirement<E, R>>;
+/**
+ * Registers buffered, GET-only HTML routes for a matcher.
+ *
+ * Path captures take precedence over same-named query parameters. Rendering
+ * completes before the response is created; this adapter does not stream.
+ *
+ * @remarks
+ * ## Why
+ *
+ * Typed route matchers already describe decoding, guards, parent prefixes, and
+ * render output. `ssrForHttp` installs that same model in Effect's HttpRouter
+ * and buffers one complete HTML document for runtimes that require a known body.
+ *
+ * ## Ownership and lifetime
+ *
+ * Registration adds GET routes to the supplied Effect HttpRouter. Each request
+ * creates request-local memory navigation and current-route services; the
+ * request Effect owns rendering and all finalizers. Buffered rendering must
+ * complete before the response is returned. Rendering HTML does not mount or
+ * hydrate a browser client.
+ *
+ * ## Routing behavior
+ *
+ * Matcher cases sharing a path are tried in their compiled order. Path params
+ * overwrite same-named query params. Decode/guard failures continue candidate
+ * selection; a matched renderer failure stays in the typed request error channel.
+ *
+ * @example
+ * ```ts
+ * import { ssrForHttp } from "@typed/ui/HttpRouter"
+ * import { Effect } from "effect"
+ * import * as HttpRouter from "effect/unstable/http/HttpRouter"
+ * import { Parse, match } from "@typed/router"
+ * import { html } from "@typed/template"
+ *
+ * const pages = match(Parse("/"), html`<h1>Home</h1>`)
+ * const routes = Effect.gen(function* () {
+ *   const router = yield* HttpRouter.make
+ *   yield* ssrForHttp(router, pages)
+ *   return router
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category http
+ */
 export declare const ssrForHttp: {
-    <E, R>(input: Matcher<RenderEvent, E, R>): (router: HttpRouter) => Effect.Effect<void, never, Exclude<R, ProvidedForSsr>>;
-    <E, R>(router: HttpRouter, input: Matcher<RenderEvent, E, R>): Effect.Effect<void, never, Exclude<R, ProvidedForSsr>>;
+    <E, R>(input: Matcher<RenderEvent, E, R>): (router: HttpRouter) => SsrForHttpEffect<E, R>;
+    <E, R>(router: HttpRouter, input: Matcher<RenderEvent, E, R>): SsrForHttpEffect<E, R>;
 };
-export declare function handleHttpServerError(router: HttpRouter): Effect.Effect<void, never, import("effect/unstable/http/HttpRouter").Request<"GlobalError", unknown>>;
+/**
+ * Registers streaming, GET-only HTML routes for a matcher.
+ *
+ * Path captures take precedence over same-named query parameters. HTML chunks
+ * are emitted as they are rendered via `renderToHtml` and `HttpServerResponse.stream`.
+ *
+ * @remarks
+ * ## Why
+ *
+ * Streaming lets the server send ordered renderer-owned HTML chunks before the
+ * whole page completes while preserving the same Typed matcher and Effect HTTP model.
+ *
+ * ## Ownership and lifetime
+ *
+ * Registration adds GET routes to the supplied router. Each request owns its
+ * navigation/router services and stream Scope. Client cancellation interrupts
+ * rendering and runs finalizers. The stream carries typed renderer failures;
+ * producing HTML alone does not attach client hydration behavior.
+ *
+ * @example
+ * ```ts
+ * import { streamingSsrForHttp } from "@typed/ui/HttpRouter"
+ * import { Effect } from "effect"
+ * import * as HttpRouter from "effect/unstable/http/HttpRouter"
+ * import { Parse, match } from "@typed/router"
+ * import { html } from "@typed/template"
+ *
+ * const pages = match(Parse("/"), html`<h1>Streamed home</h1>`)
+ * const routes = Effect.gen(function* () {
+ *   const router = yield* HttpRouter.make
+ *   yield* streamingSsrForHttp(router, pages)
+ *   return router
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category http
+ */
+export declare const streamingSsrForHttp: {
+    <E, R>(input: Matcher<RenderEvent, E, R>): (router: HttpRouter) => SsrForHttpEffect<E, R>;
+    <E, R>(router: HttpRouter, input: Matcher<RenderEvent, E, R>): SsrForHttpEffect<E, R>;
+};
+/**
+ * Converts Effect HTTP server errors into empty 400, 404, or 500 responses.
+ * Other failures remain in the global error channel.
+ *
+ * @remarks
+ * ## Why
+ *
+ * Effect's structured server failures have a safe transport status, whereas
+ * application/domain errors must remain visible for deliberate handling.
+ *
+ * ## Ownership and lifetime
+ *
+ * The middleware is installed on the supplied router and runs in each request
+ * lifetime. It allocates no long-lived resource and does not log, swallow, or
+ * reclassify non-HttpServerError failures.
+ *
+ * @example
+ * ```ts
+ * import { handleHttpServerError } from "@typed/ui/HttpRouter"
+ * import { Effect } from "effect"
+ * import * as HttpRouter from "effect/unstable/http/HttpRouter"
+ *
+ * const router = Effect.gen(function* () {
+ *   const router = yield* HttpRouter.make
+ *   yield* handleHttpServerError(router)
+ *   return router
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category http
+ */
+export declare function handleHttpServerError(router: HttpRouter): Effect.Effect<void, never, HttpRouterRequest<"GlobalError", unknown>>;
 export {};
 //# sourceMappingURL=HttpRouter.d.ts.map