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

package/dist/Slider.js

@@ -0,0 +1,96 @@
+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";
+/** Schema for slider hydration state.
+ * @remarks
+ * ## Why
+ * Finite validation prevents invalid serialized range values.
+ * ## 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 slider state.
+ * @remarks
+ * ## Why
+ * State can be composed and tested independently of the renderer.
+ * ## Ownership and lifetime
+ * The calling Effect Scope owns the returned RefSubject.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Slider from "@typed/ui/Slider"
+ *
+ * const program = Effect.gen(function* () {
+ *   return yield* Slider.makeState({ value: 50 })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category constructors
+ */
+export function makeState(initial) {
+    return RefSubject.hydrate(StateSchema, initial);
+}
+/** Updates the synchronized slider value.
+ * @remarks
+ * ## Why
+ * An explicit Effect transition preserves RefSubject failures and services.
+ * ## Ownership and lifetime
+ * It uses the existing state lifetime and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Slider from "@typed/ui/Slider"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Slider.makeState({ value: 25 })
+ *   yield* Slider.setValue(state, 50)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export function setValue(state, value) {
+    return RefSubject.update(state, (current) => ({ ...current, value }));
+}
+function internalProps(options) {
+    return ({ property }) => ({
+        type: "range",
+        value: RefSubject.map(options.state, (state) => state.value),
+        ".value": RefSubject.map(options.state, (state) => String(state.value)),
+        min: property("min", undefined),
+        max: property("max", undefined),
+        step: property("step", undefined),
+        oninput: EventHandler.make(Effect.fn((event) => setValue(options.state, Dom.currentTarget(event).valueAsNumber))),
+        ref: options.state,
+    });
+}
+/** Renders a native range input synchronized with hydrated state.
+ * @remarks
+ * ## Why
+ * Browser pointer, keyboard, constraints, and accessibility remain intact;
+ * input events update the same RefSubject consumed elsewhere.
+ * ## Ownership and lifetime
+ * Running the Fx owns native listeners and subscriptions in its Scope. A
+ * custom host must preserve type, value, range props, and the hydration ref.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Slider from "@typed/ui/Slider"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Slider.makeState({ value: 50 })
+ *   return Slider.Slider({ state, min: 0, max: 100 })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export function Slider(options, host) {
+    return Dom.renderHost()(options, host, internalProps(options), "", (props) => {
+        return html `<input ...${props} />`;
+    });
+}

package/dist/SpinButton.d.ts

@@ -0,0 +1,188 @@
+import * as Effect from "effect/Effect";
+import * as Schema from "effect/Schema";
+import { RefSubject } from "@typed/fx";
+import { EventHandler, type Renderable } from "@typed/template";
+import * as Dom from "./Dom.js";
+import type { HostResult } from "./Dom/Types.js";
+/** Current renderer-independent spin-button value.
+ * @remarks
+ * ## Why
+ * Numeric state can be transformed and tested without an input element.
+ * ## Ownership and lifetime
+ * Plain state is resource-free; RefSubject ownership is Scope-based.
+ * @since 1.0.0
+ * @category state
+ */
+export interface State {
+    /** Finite value reflected by the native number input.
+     * @remarks
+     * ## Why
+     * One source keeps form control and application state aligned.
+     * ## Ownership and lifetime
+     * Plain data acquires no resources.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly value: number;
+}
+/** Initial spin-button value.
+ * @remarks
+ * ## Why
+ * Explicit state gives SSR and hydration the same numeric snapshot.
+ * ## Ownership and lifetime
+ * Configuration is inert.
+ * @since 1.0.0
+ * @category state
+ */
+export interface InitialState {
+    /** Finite initial value.
+     * @remarks
+     * ## Why
+     * It seeds synchronized state before the element mounts.
+     * ## Ownership and lifetime
+     * Plain data retains no resources.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly value: number;
+}
+/** Schema for spin-button hydration state.
+ * @remarks
+ * ## Why
+ * Finite validation prevents invalid serialized number values.
+ * ## 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 spin-button state.
+ * @remarks
+ * ## Why
+ * State remains renderer-independent and directly testable.
+ * ## Ownership and lifetime
+ * The calling Effect Scope owns the returned RefSubject.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as SpinButton from "@typed/ui/SpinButton"
+ *
+ * const program = Effect.gen(function* () {
+ *   return yield* SpinButton.makeState({ value: 3 })
+ * })
+ * ```
+ * @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 synchronized numeric value.
+ * @remarks
+ * ## Why
+ * An explicit Effect transition preserves RefSubject errors and services.
+ * ## Ownership and lifetime
+ * It uses the existing state lifetime and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as SpinButton from "@typed/ui/SpinButton"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* SpinButton.makeState({ value: 1 })
+ *   yield* SpinButton.setValue(state, 2)
+ * })
+ * ```
+ * @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>;
+/** Options for a native number input.
+ * @remarks
+ * ## Why
+ * Native spin-button behavior supplies editing, stepping, forms, and
+ * accessibility while Typed synchronizes state.
+ * ## Ownership and lifetime
+ * Options are inert; the mounted component owns subscriptions by Scope.
+ * @since 1.0.0
+ * @category models
+ */
+export interface SpinButtonOptions extends Dom.HostOptions<HTMLInputElement> {
+    /** Hydrated value state.
+     * @remarks
+     * ## Why
+     * One source serves SSR, UI, and renderer-free state logic.
+     * ## Ownership and lifetime
+     * The component borrows state and subscribes only while mounted.
+     * @since 1.0.0
+     * @category state
+     */
+    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
+    /** Native minimum value.
+     * @remarks
+     * ## Why
+     * The platform applies this bound to stepping and validation.
+     * ## Ownership and lifetime
+     * Dynamic attributes follow the component Scope.
+     * @since 1.0.0
+     * @category attributes
+     */
+    readonly min?: Renderable.Any<number | null | undefined>;
+    /** Native maximum value.
+     * @remarks
+     * ## Why
+     * The platform applies this bound to stepping and validation.
+     * ## Ownership and lifetime
+     * Dynamic attributes follow the component Scope.
+     * @since 1.0.0
+     * @category attributes
+     */
+    readonly max?: Renderable.Any<number | null | undefined>;
+    /** Native step value or `"any"`.
+     * @remarks
+     * ## Why
+     * Increment semantics remain delegated to the number input.
+     * ## Ownership and lifetime
+     * Dynamic attributes follow the component Scope.
+     * @since 1.0.0
+     * @category attributes
+     */
+    readonly step?: Renderable.Any<number | "any" | null | undefined>;
+}
+declare function internalProps<const Options extends SpinButtonOptions>(options: Options): ({ property }: Dom.InternalPropsHelpers<Options>) => {
+    readonly type: "number";
+    readonly value: RefSubject.Computed<number, Schema.SchemaError, never>;
+    readonly ".value": RefSubject.Computed<string, Schema.SchemaError, never>;
+    readonly min: Exclude<Dom.Property<Options, "min">, Dom.Nullish> | undefined;
+    readonly max: Exclude<Dom.Property<Options, "max">, Dom.Nullish> | undefined;
+    readonly step: Exclude<Dom.Property<Options, "step">, Dom.Nullish> | undefined;
+    readonly onchange: EventHandler.EventHandler<Event, Schema.SchemaError, never>;
+    readonly ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
+};
+type SpinButtonInternalProps<Options extends SpinButtonOptions> = ReturnType<ReturnType<typeof internalProps<Options>>>;
+/** Renders a native number input synchronized with hydrated state.
+ * @remarks
+ * ## Why
+ * Browser editing, stepping, validation, and form behavior remain intact while
+ * change events update renderer-independent state.
+ * ## Ownership and lifetime
+ * Running the Fx owns listener/state subscriptions in its Scope. A custom host
+ * must preserve type, value, constraints, and the single hydration ref owner.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as SpinButton from "@typed/ui/SpinButton"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* SpinButton.makeState({ value: 1 })
+ *   return SpinButton.SpinButton({ state, min: 0 })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export declare function SpinButton<const Options extends SpinButtonOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, SpinButtonInternalProps<Options>>, "", Host>): import("./Dom/Types.js").HostComponent<Host | Options>;
+export {};
+//# sourceMappingURL=SpinButton.d.ts.map

package/dist/SpinButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinButton.d.ts","sourceRoot":"","sources":["../src/SpinButton.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,YAAY,EAAQ,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;;;;;;GAQG;AACH,MAAM,WAAW,KAAK;IACpB;;;;;;;;OAQG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAY;IAC3B;;;;;;;;OAQG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;;EAA0C,CAAC;AAEnE;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,YAAY;;2EAE9C;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAC3B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,EACzC,KAAK,EAAE,MAAM,GACZ,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAE5B;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,iBAAkB,SAAQ,GAAG,CAAC,WAAW,CAAC,gBAAgB,CAAC;IAC1E;;;;;;;;OAQG;IACH,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IACzE;;;;;;;;OAQG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD;;;;;;;;OAQG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD;;;;;;;;OAQG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACnE;AAED,iBAAS,aAAa,CAAC,KAAK,CAAC,OAAO,SAAS,iBAAiB,EAAE,OAAO,EAAE,OAAO,kBACxD,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC;aAEnD,IAAI,EAAE,QAAQ;aACd,KAAK;aACL,QAAQ;aACR,GAAG;aACH,GAAG;aACH,IAAI;aACJ,QAAQ;aAKR,GAAG;EAER;AACD,KAAK,uBAAuB,CAAC,OAAO,SAAS,iBAAiB,IAAI,UAAU,CAC1E,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,CAC1C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CACxB,KAAK,CAAC,OAAO,SAAS,iBAAiB,EACvC,KAAK,CAAC,IAAI,SAAS,UAAU,GAAG,KAAK,EAErC,OAAO,EAAE,OAAO,EAChB,IAAI,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,uBAAuB,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,0DAWlG"}

package/dist/SpinButton.js

@@ -0,0 +1,96 @@
+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";
+/** Schema for spin-button hydration state.
+ * @remarks
+ * ## Why
+ * Finite validation prevents invalid serialized number values.
+ * ## 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 spin-button state.
+ * @remarks
+ * ## Why
+ * State remains renderer-independent and directly testable.
+ * ## Ownership and lifetime
+ * The calling Effect Scope owns the returned RefSubject.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as SpinButton from "@typed/ui/SpinButton"
+ *
+ * const program = Effect.gen(function* () {
+ *   return yield* SpinButton.makeState({ value: 3 })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category constructors
+ */
+export function makeState(initial) {
+    return RefSubject.hydrate(StateSchema, initial);
+}
+/** Updates the synchronized numeric value.
+ * @remarks
+ * ## Why
+ * An explicit Effect transition preserves RefSubject errors and services.
+ * ## Ownership and lifetime
+ * It uses the existing state lifetime and acquires no resource.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as SpinButton from "@typed/ui/SpinButton"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* SpinButton.makeState({ value: 1 })
+ *   yield* SpinButton.setValue(state, 2)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category state
+ */
+export function setValue(state, value) {
+    return RefSubject.update(state, (current) => ({ ...current, value }));
+}
+function internalProps(options) {
+    return ({ property }) => ({
+        type: "number",
+        value: RefSubject.map(options.state, (state) => state.value),
+        ".value": RefSubject.map(options.state, (state) => String(state.value)),
+        min: property("min", undefined),
+        max: property("max", undefined),
+        step: property("step", undefined),
+        onchange: EventHandler.make(Effect.fn((event) => setValue(options.state, Dom.currentTarget(event).valueAsNumber))),
+        ref: options.state,
+    });
+}
+/** Renders a native number input synchronized with hydrated state.
+ * @remarks
+ * ## Why
+ * Browser editing, stepping, validation, and form behavior remain intact while
+ * change events update renderer-independent state.
+ * ## Ownership and lifetime
+ * Running the Fx owns listener/state subscriptions in its Scope. A custom host
+ * must preserve type, value, constraints, and the single hydration ref owner.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as SpinButton from "@typed/ui/SpinButton"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* SpinButton.makeState({ value: 1 })
+ *   return SpinButton.SpinButton({ state, min: 0 })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category components
+ */
+export function SpinButton(options, host) {
+    return Dom.renderHost()(options, host, internalProps(options), "", (props) => {
+        return html `<input ...${props} />`;
+    });
+}

package/dist/Storybook.d.ts

@@ -0,0 +1,76 @@
+import * as Scope from "effect/Scope";
+import { Fx } from "@typed/fx";
+import { type RenderEvent, type RenderTemplate } from "@typed/template";
+/**
+ * Live Storybook mount and its explicit asynchronous disposer.
+ *
+ * @remarks
+ * ## Why
+ * Stories need access to the actual canvas for assertions and deterministic
+ * teardown of a long-lived reactive render.
+ *
+ * ## Ownership and lifetime
+ * The mount owns its private Scope and render fiber. `dispose` interrupts the
+ * fiber and closes the Scope exactly once; callers own appending/removing the
+ * returned canvas. If the canvas is connected, disposal does not disconnect the
+ * removal observer; removing the canvas is the observer's cleanup boundary.
+ *
+ * @since 1.0.0
+ * @category testing
+ */
+export interface MountedStory {
+    /** Detached div containing the story's real rendered DOM. */
+    readonly canvas: HTMLDivElement;
+    /** Idempotently closes rendering; remove a connected canvas to release its observer. */
+    readonly dispose: () => Promise<void>;
+}
+/**
+ * Mounts a Typed component in an isolated Storybook canvas.
+ *
+ * The mount stays alive after its first render so reactive attributes and event
+ * handlers remain attached. It is released explicitly or when Storybook
+ * removes the canvas from its document.
+ *
+ * @remarks
+ * ## Why
+ *
+ * Waiting only for the first `RenderEvent` and then ending the fiber would
+ * detach reactive attributes and event handlers. This helper keeps the Typed
+ * renderer alive while still giving tests an explicit disposal boundary.
+ *
+ * ## Ownership and lifetime
+ *
+ * `mount` creates an unsafe Scope dedicated to this story, starts the render
+ * fiber, and resolves only after the first event. `dispose` interrupts and
+ * closes it idempotently. After the canvas has once been connected, a
+ * document-scoped MutationObserver disposes it when removed and then disconnects.
+ * Calling `dispose` while the canvas is still connected does **not** disconnect
+ * that observer: it continues retaining the document, canvas, and disposal
+ * closure until the canvas is removed. Tests or hosts that keep a disposed
+ * canvas connected must remove it themselves to release that observer. If
+ * rendering fails before the first event, Scope cleanup runs before rejection
+ * and no removal observer is installed.
+ *
+ * ## Platform requirements
+ *
+ * This is a browser/testing API. The provided Document supplies element and
+ * MutationObserver implementations. The canvas is returned detached so
+ * Storybook or a test controls where it enters the DOM.
+ *
+ * @example
+ * ```ts
+ * import { mount } from "@typed/ui/Storybook"
+ * import { html } from "@typed/template"
+ *
+ * const story = await mount(html`<button type="button">Save</button>`)
+ * document.body.append(story.canvas)
+ * // Run interactions and assertions against story.canvas.
+ * await story.dispose()
+ * story.canvas.remove() // disconnects the removal observer
+ * ```
+ *
+ * @since 1.0.0
+ * @category testing
+ */
+export declare function mount<E>(content: Fx.Fx<RenderEvent, E, Scope.Scope | RenderTemplate>, document?: Document): Promise<MountedStory>;
+//# sourceMappingURL=Storybook.d.ts.map

package/dist/Storybook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Storybook.d.ts","sourceRoot":"","sources":["../src/Storybook.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,cAAc,EACpB,MAAM,iBAAiB,CAAC;AAEzB;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,YAAY;IAC3B,6DAA6D;IAC7D,QAAQ,CAAC,MAAM,EAAE,cAAc,CAAC;IAChC,wFAAwF;IACxF,QAAQ,CAAC,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAsB,KAAK,CAAC,CAAC,EAC3B,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC,EAC5D,QAAQ,GAAE,QAA8B,GACvC,OAAO,CAAC,YAAY,CAAC,CAqCvB"}

package/dist/Storybook.js

@@ -0,0 +1,102 @@
+import * as Deferred from "effect/Deferred";
+import * as Effect from "effect/Effect";
+import * as Exit from "effect/Exit";
+import * as Fiber from "effect/Fiber";
+import * as Scope from "effect/Scope";
+import { Fx } from "@typed/fx";
+import { DomRenderTemplate, render as renderDom, } from "@typed/template";
+/**
+ * Mounts a Typed component in an isolated Storybook canvas.
+ *
+ * The mount stays alive after its first render so reactive attributes and event
+ * handlers remain attached. It is released explicitly or when Storybook
+ * removes the canvas from its document.
+ *
+ * @remarks
+ * ## Why
+ *
+ * Waiting only for the first `RenderEvent` and then ending the fiber would
+ * detach reactive attributes and event handlers. This helper keeps the Typed
+ * renderer alive while still giving tests an explicit disposal boundary.
+ *
+ * ## Ownership and lifetime
+ *
+ * `mount` creates an unsafe Scope dedicated to this story, starts the render
+ * fiber, and resolves only after the first event. `dispose` interrupts and
+ * closes it idempotently. After the canvas has once been connected, a
+ * document-scoped MutationObserver disposes it when removed and then disconnects.
+ * Calling `dispose` while the canvas is still connected does **not** disconnect
+ * that observer: it continues retaining the document, canvas, and disposal
+ * closure until the canvas is removed. Tests or hosts that keep a disposed
+ * canvas connected must remove it themselves to release that observer. If
+ * rendering fails before the first event, Scope cleanup runs before rejection
+ * and no removal observer is installed.
+ *
+ * ## Platform requirements
+ *
+ * This is a browser/testing API. The provided Document supplies element and
+ * MutationObserver implementations. The canvas is returned detached so
+ * Storybook or a test controls where it enters the DOM.
+ *
+ * @example
+ * ```ts
+ * import { mount } from "@typed/ui/Storybook"
+ * import { html } from "@typed/template"
+ *
+ * const story = await mount(html`<button type="button">Save</button>`)
+ * document.body.append(story.canvas)
+ * // Run interactions and assertions against story.canvas.
+ * await story.dispose()
+ * story.canvas.remove() // disconnects the removal observer
+ * ```
+ *
+ * @since 1.0.0
+ * @category testing
+ */
+export async function mount(content, document = globalThis.document) {
+    const canvas = document.createElement("div");
+    const scope = Scope.makeUnsafe();
+    const mounted = Deferred.makeUnsafe();
+    let disposed = false;
+    let fiber;
+    const dispose = async () => {
+        if (disposed)
+            return;
+        disposed = true;
+        if (fiber !== undefined) {
+            await Effect.runPromise(Fiber.interrupt(fiber));
+        }
+        await Effect.runPromise(Scope.close(scope, Exit.void));
+    };
+    fiber = Effect.runFork(Scope.provide(Fx.drain(renderDom(content, canvas).pipe(Fx.tap(() => Deferred.succeed(mounted, undefined)))).pipe(Effect.provide(DomRenderTemplate.using(document))), scope));
+    try {
+        const endedBeforeMount = Effect.andThen(Fiber.join(fiber), Effect.die("Story completed before rendering any content"));
+        await Effect.runPromise(Effect.raceFirst(Deferred.await(mounted), endedBeforeMount));
+    }
+    catch (error) {
+        await dispose();
+        throw error;
+    }
+    disposeWhenRemoved(canvas, document, dispose);
+    return { canvas, dispose };
+}
+function disposeWhenRemoved(canvas, document, dispose) {
+    const MutationObserver = document.defaultView?.MutationObserver;
+    if (MutationObserver === undefined)
+        return;
+    let connected = canvas.isConnected;
+    const observer = new MutationObserver(() => {
+        if (canvas.isConnected) {
+            connected = true;
+        }
+        else if (connected) {
+            observer.disconnect();
+            void dispose();
+        }
+    });
+    observer.observe(document, { childList: true, subtree: true });
+    queueMicrotask(() => {
+        if (canvas.isConnected)
+            connected = true;
+    });
+}