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

package/dist/Slider.js

@@ -0,0 +1,101 @@
+/**
+ * Native range input publishing numeric updates during input.
+ * Keep programmatic values coherent with bounds and control expensive downstream work separately.
+ *
+ * Read the [Slider guide](/explore/ui-slider) for a complete example.
+ *
+ * [APG interaction reference](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).
+ * @since 1.0.0
+ * @category Overview
+ * @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 Dom from "./Dom.js";
+/**
+ */
+export const StateSchema = Schema.Struct({ value: Schema.Finite });
+/**
+ * Creates hydrated slider state.
+ * @remarks
+ * State can be composed and tested independently of the renderer.
+ * 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 State construction
+ */
+export function makeState(initial) {
+    return RefSubject.hydrate(StateSchema, initial);
+}
+/**
+ * Assigns a range value without clamping or snapping it.
+ *
+ * @remarks
+ * min, max, and step belong to the native input options and are not consulted here. Validate or
+ * normalize programmatic values before assignment so the subject and browser-sanitized range
+ * value stay consistent.
+ * @since 1.0.0
+ * @category State transitions
+ */
+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 whose input events update numeric state.
+ *
+ * @remarks
+ * Dragging publishes through input, so expensive downstream work should control its own update
+ * rate. Native min/max/step, keyboard interaction, and pointer behavior stay with the browser.
+ * Supply a label and a unit-bearing readout; a custom non-input host must implement the
+ * interaction itself.
+ *
+ * @example
+ * ```ts
+ * import { RefSubject } from "@typed/fx";
+ * import { html } from "@typed/template";
+ * import { component } from "@typed/template";
+ * import * as Slider from "@typed/ui/Slider";
+ *
+ * export const ZoomControl = component(function* () {
+ *   const state = yield* Slider.makeState({ value: 100 });
+ *   const percentage = RefSubject.map(state, ({ value }) => `${value}%`);
+ *   return html`<div class="zoom-control">
+ *     <label for="preview-zoom">Preview zoom</label>
+ *     ${Slider.Slider({
+ *       state, min: 50, max: 200, step: 10,
+ *       props: { id: "preview-zoom", name: "zoom", "aria-valuetext": percentage },
+ *     })}
+ *     <output for="preview-zoom">${percentage}</output>
+ *   </div>`;
+ * });
+ * ```
+ * @since 1.0.0
+ * @category Native controls
+ */
+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,141 @@
+/**
+ * Native number entry publishing valueAsNumber at the change boundary.
+ * This thin primitive does not maintain draft strings or filter invalid numeric writes.
+ *
+ * Read the [SpinButton guide](/explore/ui-spin-button) for a complete example.
+ *
+ * [APG interaction reference](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/).
+ * @since 1.0.0
+ * @category Overview
+ * @packageDocumentation
+ */
+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";
+/**
+ */
+export interface State {
+    /**
+     */
+    readonly value: number;
+}
+/**
+ */
+export interface InitialState {
+    /**
+     */
+    readonly value: number;
+}
+/**
+ */
+export declare const StateSchema: Schema.Struct<{
+    readonly value: Schema.Finite;
+}>;
+/**
+ * Creates hydrated spin-button state.
+ * @remarks
+ * State remains renderer-independent and directly testable.
+ * 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 State construction
+ */
+export declare function makeState(initial: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
+    readonly value: number;
+}, Schema.SchemaError, never, never>, never, import("effect/Scope").Scope>;
+/**
+ * Assigns a numeric value without bounds checks or draft filtering.
+ *
+ * @remarks
+ * The helper does not consult min/max/step or reject NaN. The hydration schema describes finite
+ * snapshots, but this update is not a decoder. Choose Form.NumberInput or an explicit draft
+ * model when invalid text needs structured feedback.
+ * @since 1.0.0
+ * @category State transitions
+ */
+export declare function setValue<E, R>(state: RefSubject.RefSubject<State, E, R>, value: number): Effect.Effect<State, E, R>;
+/**
+ */
+export interface SpinButtonOptions extends Dom.HostOptions<HTMLInputElement> {
+    /**
+     * Hydrated value state.
+     * @since 1.0.0
+     * @category State connection
+     */
+    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
+    /**
+     * Native minimum value.
+     * @since 1.0.0
+     * @category Numeric bounds
+     */
+    readonly min?: Renderable.Any<number | null | undefined>;
+    /**
+     * Native maximum value.
+     * @since 1.0.0
+     * @category Numeric bounds
+     */
+    readonly max?: Renderable.Any<number | null | undefined>;
+    /**
+     * Native step value or `"any"`.
+     * @since 1.0.0
+     * @category Numeric bounds
+     */
+    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 that writes valueAsNumber on change.
+ *
+ * @remarks
+ * State updates occur at the change boundary rather than every input event. Empty or invalid
+ * native text can yield NaN; the handler does not filter it before assignment. This thin
+ * primitive does not preserve a separate draft string, create field errors, or clamp
+ * programmatic writes.
+ *
+ * @example
+ * ```ts
+ * import { RefSubject } from "@typed/fx";
+ * import { html } from "@typed/template";
+ * import { component } from "@typed/template";
+ * import * as SpinButton from "@typed/ui/SpinButton";
+ *
+ * export const CopyCount = component(function* () {
+ *   const state = yield* SpinButton.makeState({ value: 1 });
+ *   const summary = RefSubject.map(state, ({ value }) => `Copies requested: ${value}`);
+ *   return html`<div class="copy-count">
+ *     <label for="print-copies">Number of copies</label>
+ *     ${SpinButton.SpinButton({
+ *       state, min: 1, max: 100, step: 1,
+ *       props: { id: "print-copies", name: "copies", required: true },
+ *     })}
+ *     <p>${summary}</p>
+ *   </div>`;
+ * });
+ * ```
+ * @since 1.0.0
+ * @category Native controls
+ */
+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;;;;;;;;;;GAUG;AACH,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;GACG;AACH,MAAM,WAAW,KAAK;IACpB;OACG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;GACG;AACH,MAAM,WAAW,YAAY;IAC3B;OACG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;GACG;AACH,eAAO,MAAM,WAAW;;EAA0C,CAAC;AAEnE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,YAAY;;2EAE9C;AAED;;;;;;;;;GASG;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;GACG;AACH,MAAM,WAAW,iBAAkB,SAAQ,GAAG,CAAC,WAAW,CAAC,gBAAgB,CAAC;IAC1E;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IACzE;;;;OAIG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD;;;;OAIG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD;;;;OAIG;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;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,101 @@
+/**
+ * Native number entry publishing valueAsNumber at the change boundary.
+ * This thin primitive does not maintain draft strings or filter invalid numeric writes.
+ *
+ * Read the [SpinButton guide](/explore/ui-spin-button) for a complete example.
+ *
+ * [APG interaction reference](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/).
+ * @since 1.0.0
+ * @category Overview
+ * @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 Dom from "./Dom.js";
+/**
+ */
+export const StateSchema = Schema.Struct({ value: Schema.Finite });
+/**
+ * Creates hydrated spin-button state.
+ * @remarks
+ * State remains renderer-independent and directly testable.
+ * 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 State construction
+ */
+export function makeState(initial) {
+    return RefSubject.hydrate(StateSchema, initial);
+}
+/**
+ * Assigns a numeric value without bounds checks or draft filtering.
+ *
+ * @remarks
+ * The helper does not consult min/max/step or reject NaN. The hydration schema describes finite
+ * snapshots, but this update is not a decoder. Choose Form.NumberInput or an explicit draft
+ * model when invalid text needs structured feedback.
+ * @since 1.0.0
+ * @category State transitions
+ */
+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 that writes valueAsNumber on change.
+ *
+ * @remarks
+ * State updates occur at the change boundary rather than every input event. Empty or invalid
+ * native text can yield NaN; the handler does not filter it before assignment. This thin
+ * primitive does not preserve a separate draft string, create field errors, or clamp
+ * programmatic writes.
+ *
+ * @example
+ * ```ts
+ * import { RefSubject } from "@typed/fx";
+ * import { html } from "@typed/template";
+ * import { component } from "@typed/template";
+ * import * as SpinButton from "@typed/ui/SpinButton";
+ *
+ * export const CopyCount = component(function* () {
+ *   const state = yield* SpinButton.makeState({ value: 1 });
+ *   const summary = RefSubject.map(state, ({ value }) => `Copies requested: ${value}`);
+ *   return html`<div class="copy-count">
+ *     <label for="print-copies">Number of copies</label>
+ *     ${SpinButton.SpinButton({
+ *       state, min: 1, max: 100, step: 1,
+ *       props: { id: "print-copies", name: "copies", required: true },
+ *     })}
+ *     <p>${summary}</p>
+ *   </div>`;
+ * });
+ * ```
+ * @since 1.0.0
+ * @category Native controls
+ */
+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 Story lifetime
+ */
+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 Story mounting
+ */
+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 Story mounting
+ */
+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;
+    });
+}

package/dist/Switch.d.ts

@@ -0,0 +1,148 @@
+/**
+ * A button-backed on/off setting with a stable accessible name.
+ * The internal click toggles boolean state; persistence and form serialization remain explicit.
+ *
+ * Read the [Switch guide](/explore/ui-switch) for a complete example.
+ *
+ * [APG interaction reference](https://www.w3.org/WAI/ARIA/apg/patterns/switch/).
+ * @since 1.0.0
+ * @category Overview
+ * @packageDocumentation
+ */
+import * as Effect from "effect/Effect";
+import * as Schema from "effect/Schema";
+import { RefSubject } from "@typed/fx";
+import { type Renderable } from "@typed/template";
+import * as Dom from "./Dom.js";
+import type { HostResult } from "./Dom/Types.js";
+/**
+ */
+export interface State {
+    /**
+     */
+    readonly checked: boolean;
+}
+/**
+ */
+export interface InitialState {
+    /**
+     */
+    readonly checked?: boolean;
+}
+/**
+ */
+export declare const StateSchema: Schema.Struct<{
+    readonly checked: Schema.Boolean;
+}>;
+/**
+ * Creates hydrated switch state independent of rendering.
+ * @remarks
+ * Domain code and tests can own the state while any renderer consumes it.
+ * The caller's Effect Scope owns the returned RefSubject.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Switch from "@typed/ui/Switch"
+ *
+ * const program = Effect.gen(function* () {
+ *   return yield* Switch.makeState({ checked: true })
+ * })
+ * ```
+ * @since 1.0.0
+ * @category State construction
+ */
+export declare function makeState(initial?: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
+    readonly checked: boolean;
+}, Schema.SchemaError, never, never>, never, import("effect/Scope").Scope>;
+/**
+ * Sets the switch to the requested checked state.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Switch from "@typed/ui/Switch"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Switch.makeState()
+ *   yield* Switch.setChecked(state, true)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category State transitions
+ */
+export declare function setChecked<E, R>(state: RefSubject.RefSubject<State, E, R>, checked: boolean): Effect.Effect<State, E, R>;
+/**
+ * Toggles the switch between checked and unchecked.
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import * as Switch from "@typed/ui/Switch"
+ *
+ * const program = Effect.gen(function* () {
+ *   const state = yield* Switch.makeState({ checked: true })
+ *   yield* Switch.toggle(state)
+ * })
+ * ```
+ * @since 1.0.0
+ * @category State transitions
+ */
+export declare function toggle<E, R>(state: RefSubject.RefSubject<State, E, R>): Effect.Effect<State, E, R>;
+/**
+ */
+export interface SwitchOptions extends Dom.HostOptions<HTMLButtonElement> {
+    /**
+     * Hydrated state synchronized with `aria-checked`.
+     * @since 1.0.0
+     * @category State connection
+     */
+    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
+    /**
+     * Visible content and accessible name.
+     * @since 1.0.0
+     * @category Rendered content
+     */
+    readonly content: Renderable.Any;
+}
+declare function internalProps<const Options extends SwitchOptions>(options: Options): ({ property }: Dom.InternalPropsHelpers<Options>) => {
+    readonly type: "button";
+    readonly role: "switch";
+    readonly "aria-checked": RefSubject.Computed<boolean, Schema.SchemaError, never>;
+    readonly "?disabled": false | Exclude<Dom.Property<Options, "disabled">, Dom.Nullish>;
+    readonly onclick: Effect.Effect<State, Schema.SchemaError, never>;
+    readonly ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
+};
+type SwitchInternalProps<Options extends SwitchOptions> = ReturnType<ReturnType<typeof internalProps<Options>>>;
+/**
+ * Renders a button-backed ARIA switch.
+ * @remarks
+ * The component combines native button activation with a renderer-independent
+ * boolean state and real DOM click events.
+ * Running the Fx owns listener/state subscriptions in its Effect Scope. A
+ * custom host must preserve button type, role, `aria-checked`, click handler,
+ * and the single hydration ref owner.
+ * @example
+ * ```ts
+ * import { RefSubject } from "@typed/fx";
+ * import { html } from "@typed/template";
+ * import { component } from "@typed/template";
+ * import * as Switch from "@typed/ui/Switch";
+ *
+ * export const PreviewSetting = component(function* () {
+ *   const state = yield* Switch.makeState({ checked: true });
+ *   const status = RefSubject.map(state, ({ checked }) => checked ? "On" : "Off");
+ *   return html`<section>
+ *     ${Switch.Switch({
+ *       state,
+ *       content: "Show live preview",
+ *       props: { class: "preview-switch", "aria-describedby": "preview-setting-help" },
+ *     })}
+ *     <span aria-hidden="true">${status}</span>
+ *     <p id="preview-setting-help">Updates the preview while you edit.</p>
+ *   </section>`;
+ * });
+ * ```
+ * @since 1.0.0
+ * @category Native controls
+ */
+export declare function Switch<const Options extends SwitchOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, SwitchInternalProps<Options>>, Options["content"], Host>): import("./Dom/Types.js").HostComponent<Host | Options>;
+export {};
+//# sourceMappingURL=Switch.d.ts.map

package/dist/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../src/Switch.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;GACG;AACH,MAAM,WAAW,KAAK;IACpB;OACG;IACH,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;CAC3B;AAED;GACG;AACH,MAAM,WAAW,YAAY;IAC3B;OACG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;GACG;AACH,eAAO,MAAM,WAAW;;EAA6C,CAAC;AAEtE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,YAAiB;;2EAEnD;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,EAC7B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,EACzC,OAAO,EAAE,OAAO,GACf,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAE5B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,CAAC,EACzB,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,GACxC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAE5B;AAED;GACG;AACH,MAAM,WAAW,aAAc,SAAQ,GAAG,CAAC,WAAW,CAAC,iBAAiB,CAAC;IACvE;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IACzE;;;;OAIG;IACH,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC;CAClC;AAED,iBAAS,aAAa,CAAC,KAAK,CAAC,OAAO,SAAS,aAAa,EAAE,OAAO,EAAE,OAAO,kBACpD,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC;aAEnD,IAAI,EAAE,QAAQ;aACd,IAAI,EAAE,QAAQ;aACd,cAAc;aACd,WAAW;aACX,OAAO;aACP,GAAG;EAER;AACD,KAAK,mBAAmB,CAAC,OAAO,SAAS,aAAa,IAAI,UAAU,CAClE,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,CAC1C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,MAAM,CAAC,KAAK,CAAC,OAAO,SAAS,aAAa,EAAE,KAAK,CAAC,IAAI,SAAS,UAAU,GAAG,KAAK,EAC/F,OAAO,EAAE,OAAO,EAChB,IAAI,CAAC,EAAE,GAAG,CAAC,YAAY,CACrB,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC,EAC1D,OAAO,CAAC,SAAS,CAAC,EAClB,IAAI,CACL,0DAWF"}