effectweb 0.4.0 → 0.5.1

package/dist/cache-internals.d.ts

@@ -1,3 +1,4 @@
+import type * as Scope from 'effect/Scope';
 import type * as AsyncResult from 'effect/unstable/reactivity/AsyncResult';
 import type * as Atom from 'effect/unstable/reactivity/Atom';
 import type * as AtomRegistry from 'effect/unstable/reactivity/AtomRegistry';
@@ -7,11 +8,11 @@ import type { Snapshot } from './snapshot.js';
 export interface CacheInternals<R> {
     refresh(atom: Atom.Atom<unknown>): void;
     readonly disposed: () => boolean;
-    revision<Args, A, E>(definition: Query<Args, A, E, R>, args: Args | Snapshot<Args>): number | undefined;
+    revision<Args, A, E>(definition: Query<Args, A, E, R | Scope.Scope>, args: Args | Snapshot<Args>): number | undefined;
     retain(atom: Atom.Atom<unknown>): () => void;
     readonly registry: AtomRegistry.AtomRegistry;
     readonly generation: Atom.Writable<number>;
-    query<Args, A, E>(definition: Query<Args, A, E, R>, args: Args | Snapshot<Args>): Atom.Atom<AsyncResult.AsyncResult<Snapshot<A>, E>>;
+    query<Args, A, E>(definition: Query<Args, A, E, R | Scope.Scope>, args: Args | Snapshot<Args>): Atom.Atom<AsyncResult.AsyncResult<Snapshot<A>, E>>;
 }
 export declare function registerCache<R>(cache: QueryCache<R>, internals: CacheInternals<R>): void;
 /** Private implementation access; deliberately absent from package exports. */

package/dist/cache.d.ts

@@ -1,7 +1,8 @@
 import { type Snapshot } from './snapshot.js';
 import * as Effect from 'effect/Effect';
+import * as Scope from 'effect/Scope';
 import { type Query, type QueryGroup } from './query.js';
-import type { UiRuntime } from './runtime.js';
+import { type UiRuntime } from './runtime.js';
 export { loadEffect, type UiLoad } from './load.js';
 export { shareValue } from './share.js';
 export interface QueryCacheOptions {
@@ -10,32 +11,34 @@ export interface QueryCacheOptions {
 }
 export declare function makeQueryCache(options?: QueryCacheOptions): QueryCache<never>;
 export declare function makeQueryCache<R>(runtime: UiRuntime<R>, options?: QueryCacheOptions): QueryCache<R>;
+/** Capture application services and clock, and close the cache with the current Effect scope. */
+export declare const scopedQueryCache: <R = never>(options?: QueryCacheOptions) => Effect.Effect<QueryCache<R>, never, R | Scope.Scope>;
 /** A cache owns one registry and the query resources published through it. */
 export interface QueryCache<R = never> {
     batch(work: () => void): void;
-    getQueryData<Args, A, E>(definition: Query<Args, A, E, R>, args: NoInfer<Args> | Snapshot<NoInfer<Args>>): Snapshot<A> | undefined;
-    invalidateWhere<Args, A, E>(definition: Query<Args, A, E, R>, predicate: (args: Snapshot<Args>) => boolean): void;
+    getQueryData<Args, A, E>(definition: Query<Args, A, E, R | Scope.Scope>, args: NoInfer<Args> | Snapshot<NoInfer<Args>>): Snapshot<A> | undefined;
+    invalidateWhere<Args, A, E>(definition: Query<Args, A, E, R | Scope.Scope>, predicate: (args: Snapshot<Args>) => boolean): void;
     invalidateGroup(group: QueryGroup): void;
     /** Cancel requests while retaining the last success. Explicit refresh restarts them. */
-    cancelQuery<Args, A, E>(definition: Query<Args, A, E, R>, ...selected: [] | [NoInfer<Args> | Snapshot<NoInfer<Args>>]): void;
+    cancelQuery<Args, A, E>(definition: Query<Args, A, E, R | Scope.Scope>, ...selected: [] | [NoInfer<Args> | Snapshot<NoInfer<Args>>]): void;
     /** Clear cached data and cancel requests; a subsequent selection or refresh reloads. */
-    removeQuery<Args, A, E>(definition: Query<Args, A, E, R>, ...selected: [] | [NoInfer<Args> | Snapshot<NoInfer<Args>>]): void;
-    prefetch<Args, A, E>(definition: Query<Args, A, E, R>, args: NoInfer<Args> | Snapshot<NoInfer<Args>>, options?: {
+    removeQuery<Args, A, E>(definition: Query<Args, A, E, R | Scope.Scope>, ...selected: [] | [NoInfer<Args> | Snapshot<NoInfer<Args>>]): void;
+    prefetch<Args, A, E>(definition: Query<Args, A, E, R | Scope.Scope>, args: NoInfer<Args> | Snapshot<NoInfer<Args>>, options?: {
         readonly refresh?: boolean;
     }): Effect.Effect<Snapshot<A>, E>;
     /** Publish a protected success, including undefined, and supersede any pending load for this key. */
-    setQueryData<Args, A, E>(definition: Query<Args, A, E, R>, args: NoInfer<Args> | Snapshot<NoInfer<Args>>, value: NoInfer<A> | Snapshot<NoInfer<A>>): Snapshot<A>;
+    setQueryData<Args, A, E>(definition: Query<Args, A, E, R | Scope.Scope>, args: NoInfer<Args> | Snapshot<NoInfer<Args>>, value: NoInfer<A> | Snapshot<NoInfer<A>>): Snapshot<A>;
     /**
      * Update an existing success, including one retained during refresh or failure, and supersede its load.
      * No success or an undefined updater return skips the write. Use setQueryData to seed or store undefined.
      * Updaters run synchronously on readonly data; a throw leaves the cached value unchanged.
      */
-    updateQueryData<Args, A, E>(definition: Query<Args, A, E, R>, args: NoInfer<Args> | Snapshot<NoInfer<Args>>, update: (previous: Snapshot<A>) => NoInfer<A> | Snapshot<NoInfer<A>> | undefined): Snapshot<A> | undefined;
-    invalidateQuery<Args, A, E>(definition: Query<Args, A, E, R>, ...selected: [] | [NoInfer<Args> | Snapshot<NoInfer<Args>>]): void;
+    updateQueryData<Args, A, E>(definition: Query<Args, A, E, R | Scope.Scope>, args: NoInfer<Args> | Snapshot<NoInfer<Args>>, update: (previous: Snapshot<A>) => NoInfer<A> | Snapshot<NoInfer<A>> | undefined): Snapshot<A> | undefined;
+    invalidateQuery<Args, A, E>(definition: Query<Args, A, E, R | Scope.Scope>, ...selected: [] | [NoInfer<Args> | Snapshot<NoInfer<Args>>]): void;
     /** Observe account resets without exposing registry mutation. */
     onReset(listener: () => void): () => void;
     resetResources(): void;
-    /** Interrupt every request and wait for its finalizers, including previously canceled requests. */
+    /** Release retained acquisitions and join all load/resource finalizers, including canceled or evicted entries. */
     close(): Effect.Effect<void>;
     dispose(): void;
 }

package/dist/cache.js

@@ -2,15 +2,19 @@ import { Settlement } from './settlement.js';
 import { protectSnapshot } from './snapshot.js';
 import * as Deferred from 'effect/Deferred';
 import * as Effect from 'effect/Effect';
+import * as Scope from 'effect/Scope';
+import * as Exit from 'effect/Exit';
 import * as Option from 'effect/Option';
 import * as AsyncResult from 'effect/unstable/reactivity/AsyncResult';
 import * as Atom from 'effect/unstable/reactivity/Atom';
 import * as AtomRegistry from 'effect/unstable/reactivity/AtomRegistry';
 import { loadEffect } from './load.js';
 import { shareData } from './sharing.js';
-import { encodeQueryKey } from './query.js';
+import { encodeQueryArguments } from './query.js';
 import { registerCache } from './cache-internals.js';
 import { queryDefinition } from './query-internals.js';
+import { defaultUiRuntime, makeUiRuntime } from './runtime.js';
+import { reportError, reportSafely } from './errors.js';
 export { loadEffect } from './load.js';
 export { shareValue } from './share.js';
 export function makeQueryCache(runtimeOrOptions, options = {}) {
@@ -23,6 +27,7 @@ function createQueryCache(runtime, options = {}) {
     if (!Number.isFinite(retention) || retention < 0)
         throw new RangeError('Query retention must be finite and nonnegative.');
     const registry = AtomRegistry.make({ defaultIdleTTL: retention });
+    const clock = (runtime ?? defaultUiRuntime).clock;
     const cancelValue = Symbol('cancel');
     const removeValue = Symbol('remove');
     const generation = Atom.keepAlive(Atom.make(0));
@@ -54,8 +59,28 @@ function createQueryCache(runtime, options = {}) {
                 next.revision = ++nextRevision;
                 next.canceled = false;
                 const revision = next.revision;
+                const scope = Scope.makeUnsafe();
+                const completed = Deferred.makeUnsafe();
+                const finish = settlement.begin();
+                let started = false;
+                let stopping = false;
+                get.addFinalizer(() => {
+                    stopping = true;
+                    // The atom interrupts its load first. Join acquisition and its ensuring
+                    // finalizers before closing resources, including late acquisitions.
+                    Effect.runFork(Effect.uninterruptible(Effect.gen(function* () {
+                        if (started)
+                            yield* Deferred.await(completed);
+                        yield* Scope.close(scope, Exit.void);
+                    })).pipe(Effect.ensuring(Effect.sync(finish)))).addObserver((exit) => {
+                        if (Exit.isFailure(exit))
+                            reportSafely(reportError, exit.cause);
+                    });
+                });
                 return Effect.suspend(() => {
-                    const finish = settlement.begin();
+                    if (stopping)
+                        return Effect.interrupt;
+                    started = true;
                     return loadEffect(() => next.load()).pipe(Effect.map((value) => {
                         const shared = Option.isSome(previous)
                             ? share(previous.value, value)
@@ -64,7 +89,12 @@ function createQueryCache(runtime, options = {}) {
                         if (!disposed && revision === next.revision)
                             remember(next, snapshot);
                         return snapshot;
-                    }), Effect.ensuring(Effect.sync(finish)));
+                    }), Scope.provide(scope), Effect.onExit((exit) => (Exit.isFailure(exit) ? Scope.close(scope, exit) : Effect.void).pipe(Effect.ensuring(Effect.sync(() => {
+                        Deferred.doneUnsafe(completed, Effect.void);
+                        // Successful loads retain their resources with the atom entry.
+                        if (Exit.isFailure(exit))
+                            finish();
+                    })))));
                 });
             });
             const next = {
@@ -112,7 +142,7 @@ function createQueryCache(runtime, options = {}) {
         return { entry, atom: entry.atom };
     };
     const remember = (entry, value) => {
-        entry.loadedAt = Date.now();
+        entry.loadedAt = clock.currentTimeMillisUnsafe();
         const node = registry.getNodes().get(entry.atom);
         if (node)
             values.set(node, { value });
@@ -125,13 +155,15 @@ function createQueryCache(runtime, options = {}) {
         if (disposed)
             throw new Error('Cannot write to a disposed query cache.');
     };
-    const queryKey = (definition, args) => `query:${identity(definition)}:${encodeQueryKey(args)}`;
+    const queryKey = (definition, args) => `query:${identity(definition)}:${encodeQueryArguments(definition, args)}`;
     const acquireQuery = (definition, args) => {
         const config = queryDefinition(definition);
         protectSnapshot(args);
         const { entry, atom } = acquire(queryKey(definition, args), () => {
             const effect = Effect.suspend(() => config.load(args, previousValue(resources.get(queryKey(definition, args)))?.value));
-            return runtime ? runtime.provide(effect) : effect;
+            return runtime
+                ? runtime.provideScoped(effect)
+                : effect;
         }, config.share);
         entry.query = definition;
         entry.args = args;
@@ -149,7 +181,7 @@ function createQueryCache(runtime, options = {}) {
             refresh(entry);
         if (registry.getNodes().has(atom) &&
             entry.loadedAt !== undefined &&
-            Date.now() - entry.loadedAt >= config.staleTime) {
+            clock.currentTimeMillisUnsafe() - entry.loadedAt >= config.staleTime) {
             const current = registry.get(atom);
             if (!current.waiting)
                 refresh(entry);
@@ -326,3 +358,8 @@ function createQueryCache(runtime, options = {}) {
     });
     return Object.freeze(cache);
 }
+/** Capture application services and clock, and close the cache with the current Effect scope. */
+export const scopedQueryCache = (options = {}) => Effect.gen(function* () {
+    const runtime = yield* makeUiRuntime();
+    return yield* Effect.acquireRelease(Effect.sync(() => makeQueryCache(runtime, options)), (cache) => cache.close());
+});

package/dist/component.d.ts

@@ -31,7 +31,7 @@ export declare function component<Props, Model extends {
 /** Mount an existing program without introducing a second state owner. */
 export declare function programView<Props, Model, Message>(definition: {
     identity?: (props: Snapshot<Props>) => unknown;
-    create: (props: Snapshot<Props>) => import('./program').Program<Model, Message>;
+    create: (props: Snapshot<Props>, runtime: UiRuntime<never>) => import('./program').Program<Model, Message>;
     receive: (source: import('./program').Program<Model, Message>, props: Snapshot<Props>) => void;
     view: View<Model, Message>;
 }): View<Props, never>;

package/dist/component.js

@@ -19,8 +19,9 @@ export function localComponent(definition) {
 }
 /** A child model receives immutable parent inputs and owns its own message/command loop. */
 export function component(definition) {
-    const runtime = definition.runtime ?? defaultUiRuntime;
     return identify(compiled((scope, parent, before) => {
+        const ownerRuntime = scope.settlement.runtime ?? defaultUiRuntime;
+        const runtime = definition.runtime ?? ownerRuntime;
         const wrap = (next) => ({
             model: next.model,
             ...(next.cancel ? { cancel: next.cancel } : {}),
@@ -33,6 +34,7 @@ export function component(definition) {
         const source = program({
             initial: definition.init(scope.value),
             onDefect: scope.report,
+            runtime: ownerRuntime,
             update: (model, envelope) => wrap(envelope.type === 'Input'
                 ? (definition.receive?.(model, envelope.props) ?? {
                     model: Object.is(model.props, envelope.props)
@@ -62,7 +64,7 @@ export function component(definition) {
 /** Mount an existing program without introducing a second state owner. */
 export function programView(definition) {
     return identify(compiled((scope, parent, before) => {
-        const source = definition.create(scope.value);
+        const source = definition.create(scope.value, scope.settlement.runtime ?? defaultUiRuntime);
         if (scope.disposed) {
             closeProgram(scope, source);
             return;

package/dist/dom.d.ts

@@ -1,12 +1,14 @@
 import * as Effect from 'effect/Effect';
-import type { Snapshot } from './snapshot.js';
+import { type Snapshot } from './snapshot.js';
 import { type ReportError } from './errors.js';
 import { type BindingSource } from './diagnostics.js';
 import type { Rows } from './index.js';
 import { jsxComponent, type JSX } from './jsx.js';
 import type { DomMount } from './mount.js';
 import { Settlement } from './settlement.js';
-import type { Program, Send } from './program.js';
+import type { Send } from './program.js';
+import type { Source } from './source.js';
+import type { UiRuntime } from './runtime.js';
 type Dependencies = () => readonly unknown[];
 type BindingLocation = BindingSource | (() => BindingSource | undefined);
 type Cleanup = () => void;
@@ -38,7 +40,7 @@ export declare const ViewBinding: (<M, E>(this: never, props: {
     [jsxComponent]: true;
 };
 /** Untyped callers get an actionable failure instead of silently losing child messages. */
-export declare function unboundSend(_message: never): never;
+export declare function unboundSend(_message: unknown): never;
 declare const contentBrand: unique symbol;
 /** Owned markup accepted wherever JSX can render content. */
 export interface CompiledContent {
@@ -52,6 +54,8 @@ export declare function slot<A = void>(render: (value: Snapshot<A>) => JSX.Eleme
 /** Evaluate ordinary synchronous JavaScript for each immutable model publication. */
 export declare function view<M, E = never>(render: (model: Snapshot<M>, send: Send<E>) => JSX.Element): View<M, E>;
 export declare function compiled<M, E>(build: Build<M, E>): View<M, E>;
+/** Skip a view only under the caller's explicit equality contract. */
+export declare function memoView<M, E>(definition: View<M, E>, equals: (previous: Snapshot<M>, next: Snapshot<M>) => boolean): View<M, E>;
 type MarkupProps = Readonly<Record<string, unknown>> & {
     readonly children?: JSX.Element;
 };
@@ -60,18 +64,44 @@ export declare function markup(tag: string, sources?: Readonly<Record<string, Bi
 export declare function renderComponent(component: (props: never) => JSX.Element, props: Readonly<Record<string, unknown>>): JSX.Element;
 /** Preserve collection identity (or array reference identity) while rendering rows. */
 export declare function list<A>(rows: Rows<A> | readonly A[], render: (item: A, index: number) => JSX.Element): JSX.Element;
+/**
+ * Define keyed row projection once. Every dependency is passed as an explicit input;
+ * only changed projected props enter the row view's renderer.
+ */
+export declare function listView<A, Input, Props, Message = never>(options: {
+    readonly project: (item: A, index: number, input: Input) => Props | Snapshot<Props>;
+    readonly view: View<Props, Message>;
+    readonly equals?: (previous: Snapshot<Props>, next: Snapshot<Props>) => boolean;
+}): (rows: Rows<A> | readonly A[], input: Input, ...dispatch: [Message] extends [never] ? [send?: Send<Message>] : [send: Send<Message>]) => JSX.Element;
+/** Render a declared source in its own subscribed region. No dependencies are inferred. */
+export declare function observe<A>(source: Source<A>, render: (value: Snapshot<A>) => JSX.Element): JSX.Element;
 export interface PortalProps {
     readonly children?: JSX.Element;
     readonly mount?: Element | undefined;
 }
 /** Owned content in an element target, defaulting to the document body. */
 export declare const Portal: View<PortalProps, never>;
-export declare function mountView<M, E>(parent: Node, definition: View<M, E>, source: Program<M, E>, options?: {
-    onError?: ReportError;
-}): (() => void) & {
-    dispose: () => void;
-    close: () => Effect.Effect<void, never, never>;
-};
+export interface MountOptions {
+    readonly onError?: ReportError;
+    readonly runtime?: UiRuntime<never>;
+}
+export interface Mounted {
+    (): void;
+    readonly dispose: () => void;
+    readonly close: () => Effect.Effect<void>;
+}
+export declare function mountView<M, E>(parent: Node, definition: View<M, E>, source: Source<M> & {
+    readonly send: Send<E>;
+}, options?: MountOptions): Mounted;
+export declare function mountView<M>(parent: Node, definition: View<M, never>, source: Source<M>, options?: MountOptions): Mounted;
+export declare function mountView<M, E>(parent: Node, definition: View<M, E>, source: Source<M>, options: MountOptions & {
+    readonly send: Send<E>;
+}): Mounted;
+/** Internal mounting boundary. Its owner retains completion accounting if construction fails. */
+export declare function mountViewWithSettlement<M, E>(parent: Node, definition: View<M, E>, source: Source<M>, options: {
+    readonly send: Send<E>;
+    readonly onError?: ReportError;
+}, settlement: Settlement): Mounted;
 export declare function element(parent: Node, before: Node | null, tag: string): Element;
 export declare function attribute(element: Element, name: string, value: unknown): void;
 /** Compiler output for attributes whose unchanged value needs no DOM refresh. */

package/dist/dom.js

@@ -1,5 +1,7 @@
 import attributeData from './dom-attributes.json' with { type: 'json' };
 import * as Effect from 'effect/Effect';
+import * as Exit from 'effect/Exit';
+import { protectSnapshot } from './snapshot.js';
 import { validateIdentities } from './collection.js';
 import { runAll, reportError, reportSafely } from './errors.js';
 import { eventEffects } from './effectEvent.js';
@@ -130,6 +132,18 @@ export function compiled(build) {
     const definition = Object.assign((props) => new SlotPlacement(viewContent(definition), { model: props, send: unboundSend }), { build, [jsxComponent]: true });
     return definition;
 }
+/** Skip a view only under the caller's explicit equality contract. */
+export function memoView(definition, equals) {
+    return compiled((scope, parent, before) => {
+        const child = new Scope(scope.value, scope.send, scope.report, scope.settlement);
+        scope.cleanups.push(() => child.dispose());
+        definition.build(child, parent, before);
+        scope.jobs.push(() => {
+            if (!equals(child.value, scope.value))
+                child.set(scope.value);
+        });
+    });
+}
 const viewDefinitions = new WeakMap();
 function viewContent(definition) {
     let content = viewDefinitions.get(definition);
@@ -195,6 +209,63 @@ const listDefinition = contentDefinition((scope, parent, before) => {
 export function list(rows, render) {
     return new SlotPlacement(listDefinition, { rows, render });
 }
+/**
+ * Define keyed row projection once. Every dependency is passed as an explicit input;
+ * only changed projected props enter the row view's renderer.
+ */
+export function listView(options) {
+    const equals = options.equals ?? Object.is;
+    const definition = contentDefinition((scope, parent, before) => {
+        each(scope, parent, before, () => scope.value.rows, () => [scope.value.input, scope.value.send], true, (row, parent, before) => {
+            const model = () => protectSnapshot(options.project(row.value[0], row.value[1], scope.value.input));
+            const child = new Scope(model(), (message) => scope.value.send(message), scope.report, scope.settlement);
+            row.cleanups.push(() => child.dispose());
+            options.view.build(child, parent, before);
+            row.jobs.push(() => {
+                const next = model();
+                if (!equals(child.value, next))
+                    child.set(next);
+            });
+        });
+    });
+    return (rows, input, ...dispatch) => new SlotPlacement(definition, { rows, input, send: dispatch[0] ?? unboundSend });
+}
+const observationDefinition = contentDefinition((scope, parent, before) => {
+    let unsubscribe = () => { };
+    let source = scope.value.source;
+    const child = new Scope(source.model(), unboundSend, scope.report, scope.settlement);
+    scope.cleanups.push(() => child.dispose(), () => unsubscribe());
+    text(child, parent, before, () => [child.value, scope.value.render], () => scope.value.render(child.value));
+    const connect = () => {
+        if (scope.disposed)
+            return;
+        const current = source;
+        const release = current.subscribe((value) => {
+            if (!scope.disposed && source === current)
+                child.set(value);
+        });
+        if (scope.disposed || source !== current)
+            release();
+        else {
+            unsubscribe = release;
+            child.set(current.model());
+        }
+    };
+    connect();
+    scope.jobs.push(() => {
+        if (source !== scope.value.source) {
+            unsubscribe();
+            source = scope.value.source;
+            connect();
+        }
+        else
+            child.set(source.model());
+    });
+});
+/** Render a declared source in its own subscribed region. No dependencies are inferred. */
+export function observe(source, render) {
+    return new SlotPlacement(observationDefinition, { source, render });
+}
 /** Owned content in an element target, defaulting to the document body. */
 export const Portal = /* @__PURE__ */ compiled((scope) => {
     portal(scope, (child, parent, before) => {
@@ -261,9 +332,14 @@ function buildFragment(parent) {
     return fragment;
 }
 export function mountView(parent, definition, source, options = {}) {
+    return mountViewWithSettlement(parent, definition, source, { ...options, send: options.send ?? source.send ?? unboundSend }, new Settlement(options.runtime));
+}
+/** Internal mounting boundary. Its owner retains completion accounting if construction fails. */
+export function mountViewWithSettlement(parent, definition, source, options, settlement) {
     return commitDom(() => {
+        const initial = source.model();
         const { start, end } = markers(parent, null);
-        const scope = new Scope(source.model(), source.send, options.onError);
+        const scope = new Scope(initial, options.send, options.onError, settlement);
         let unsubscribe = () => { };
         let ready = false;
         let latest = scope.value;
@@ -281,13 +357,22 @@ export function mountView(parent, definition, source, options = {}) {
                 scope.set(latest);
         }
         catch (error) {
+            settlement.exit = Exit.die(error);
             runAll([unsubscribe, () => scope.dispose(), () => remove(start, end)], scope.report);
             throw error;
         }
+        let disposed = false;
         const dispose = () => {
-            if (scope.disposed)
+            if (disposed)
                 return;
-            runAll([unsubscribe, () => scope.dispose(), () => remove(start, end)], scope.report);
+            disposed = true;
+            const finish = settlement.begin();
+            try {
+                runAll([unsubscribe, () => scope.dispose(), () => remove(start, end)], scope.report);
+            }
+            finally {
+                finish();
+            }
         };
         return Object.assign(dispose, {
             dispose,
@@ -357,7 +442,9 @@ export function attribute(element, name, value) {
             style.setProperty(property, value);
         styleProperties.set(element, next);
     }
-    else if (name === 'value' && 'value' in element) {
+    else if (name === 'value' && 'value' in element && element.localName !== 'option') {
+        // An <option> gets its value as an attribute: before its text child exists its value property reads "", so a
+        // property write of "" would be skipped and the option would later fall back to its text.
         const next = scalar(value);
         if (element.value !== next)
             element.value = next;
@@ -995,7 +1082,7 @@ export function attach(scope, element, dependencies, read) {
     let active;
     scope.cleanups.push(() => {
         generation++;
-        active?.dispose();
+        active?.dispose(scope.settlement.exit);
         active = undefined;
     });
     scope.watch(dependencies, () => {
@@ -1011,7 +1098,7 @@ export function attach(scope, element, dependencies, read) {
             if (!scope.disposed && token === generation) {
                 const finished = scope.settlement.begin();
                 try {
-                    const acquired = prepareMount(element, mount, scope.report);
+                    const acquired = prepareMount(element, mount, scope.report, scope.settlement.runtime);
                     Effect.runFork(acquired.closed).addObserver(finished);
                     if (scope.disposed || token !== generation)
                         acquired.dispose();

package/dist/effectEvent.d.ts

@@ -1,19 +1,22 @@
 import * as Effect from 'effect/Effect';
+import type * as Scope from 'effect/Scope';
 import { type ReportError } from './errors.js';
 import type { Settlement } from './settlement.js';
 import { type UiRuntime } from './runtime.js';
 declare const tag: unique symbol;
 export interface EffectEventRequest {
     readonly [tag]: true;
-    readonly policy: 'drop' | 'replace';
-    readonly effect: Effect.Effect<unknown, unknown>;
+    readonly policy: 'drop' | 'replace' | 'parallel';
+    readonly effect: Effect.Effect<unknown, unknown, Scope.Scope>;
 }
 /** Capture/prevent native events on every call; the policy gates only Effect execution. */
-export declare function effectEvent<EventType extends Event, E>(policy: 'drop' | 'replace', load: (event: EventType) => Effect.Effect<unknown, E>): (event: EventType) => EffectEventRequest;
-export declare function effectEvent<EventType extends Event, E, R>(policy: 'drop' | 'replace', load: (event: EventType) => Effect.Effect<unknown, E, R>, runtime: UiRuntime<R>): (event: EventType) => EffectEventRequest;
+export declare function effectEvent<EventType extends Event, E>(policy: 'drop' | 'replace', load: (event: EventType) => Effect.Effect<unknown, E, Scope.Scope>): (event: EventType) => EffectEventRequest;
+export declare function effectEvent<EventType extends Event, E, R>(policy: 'drop' | 'replace', load: (event: EventType) => Effect.Effect<unknown, E, R | Scope.Scope>, runtime: UiRuntime<R>): (event: EventType) => EffectEventRequest;
+/** Capture an operation's services in Effect setup; its event listener supplies the work scope. */
+export declare const makeEffectHandler: <Args extends readonly unknown[], A, E, R = never>(work: (...args: Args) => Effect.Effect<A, E, R | Scope.Scope>) => Effect.Effect<(...args: Args) => Effect.Effect<A, E, Scope.Scope>, never, R>;
 /** Internal listener owner, allocated only when an event returns an owned request. */
 export declare function eventEffects(report: ReportError, settlement?: Settlement): {
-    accept(request: EffectEventRequest): void;
+    accept(value: EffectEventRequest | Effect.Effect<unknown, unknown, Scope.Scope>): void;
     dispose(): void;
 };
 export {};

package/dist/effectEvent.js

@@ -2,51 +2,67 @@ import * as Cause from 'effect/Cause';
 import * as Effect from 'effect/Effect';
 import * as Fiber from 'effect/Fiber';
 import { reportSafely } from './errors.js';
-import { defaultUiRuntime } from './runtime.js';
+import { uiRuntime } from './runtime.js';
 const tag = Symbol('Effect event');
 export function effectEvent(policy, load, runtime) {
-    const owner = runtime ?? defaultUiRuntime;
-    return (event) => ({ [tag]: true, policy, effect: owner.provide(load(event)) });
+    return (event) => ({
+        [tag]: true,
+        policy,
+        effect: runtime
+            ? runtime.provideScoped(load(event))
+            : load(event),
+    });
 }
+/** Capture an operation's services in Effect setup; its event listener supplies the work scope. */
+export const makeEffectHandler = (work) => Effect.map(Effect.context(), (context) => {
+    const runtime = uiRuntime(context);
+    return (...args) => runtime.provideScoped(Effect.suspend(() => work(...args)));
+});
 /** Internal listener owner, allocated only when an event returns an owned request. */
 export function eventEffects(report, settlement) {
-    let active;
+    const active = new Set();
     let disposed = false;
     const stop = () => {
-        const previous = active;
-        active = undefined;
-        if (previous?.fiber)
-            Effect.runFork(Fiber.interrupt(previous.fiber));
+        const previous = [...active];
+        active.clear();
+        for (const token of previous)
+            if (token.fiber)
+                Effect.runFork(Fiber.interrupt(token.fiber));
     };
     return {
-        accept(request) {
+        accept(value) {
+            // Direct Effects admit every event. Other policies are explicit requests.
+            const request = Effect.isEffect(value)
+                ? { policy: 'parallel', effect: value }
+                : value;
             if (disposed)
                 return;
-            if (request.policy === 'drop' && active)
+            if (request.policy === 'drop' && active.size)
                 return;
-            stop();
+            if (request.policy === 'replace')
+                stop();
             const token = {};
-            active = token;
+            active.add(token);
             const finished = settlement?.begin();
             try {
-                const fiber = Effect.runFork(request.effect);
+                const fiber = settlement?.runtime
+                    ? settlement.runtime.runFork(request.effect)
+                    : Effect.runFork(Effect.scoped(request.effect));
                 token.fiber = fiber;
                 fiber.addObserver((exit) => {
-                    const current = !disposed && active === token;
-                    if (current)
-                        active = undefined;
+                    const current = !disposed && active.has(token);
+                    active.delete(token);
                     if (exit._tag === 'Failure' && (current || !Cause.hasInterruptsOnly(exit.cause)))
                         reportSafely(report, exit.cause);
                     finished?.();
                 });
-                if (disposed || active !== token) {
+                if (disposed || !active.has(token)) {
                     Effect.runFork(Fiber.interrupt(fiber));
                 }
             }
             catch (error) {
                 finished?.();
-                if (active === token)
-                    active = undefined;
+                active.delete(token);
                 reportSafely(report, error);
             }
         },

package/dist/index.d.ts

@@ -1,17 +1,19 @@
 export type { Snapshot, SnapshotOpaque, snapshotOpaque } from './snapshot.js';
-export { modelOwner, type ModelOwner, type DisposableOwner, type TaskPolicy } from './owner.js';
+export { modelOwner, makeModelOwner, type ModelOwner, type DisposableOwner, type TaskPolicy, } from './owner.js';
 export { collection, entities, sequence, type Rows, type Collection } from './collection.js';
 export { component, localComponent, programView } from './component.js';
 export { patchModel } from './state.js';
 export { defineActions, type ActionMessage } from './actions.js';
 export { taskComponent, taskControls, type TaskModel, type TaskMessage } from './task.js';
-export { effectEvent } from './effectEvent.js';
-export { mountView, view, list, ViewBinding, type View } from './dom.js';
+export { effectEvent, makeEffectHandler } from './effectEvent.js';
+export { mountView, view, list, listView, memoView, observe, ViewBinding, type View, type Mounted, } from './dom.js';
+export { mount } from './render.js';
+export { mapSource, fromStream, fromSubscriptionRef, fromAtom, projectionSource, type Source, } from './source.js';
 export { lazyView, type LazyViewOptions } from './lazy.js';
 export type { JSX } from './jsx.js';
-export { Portal, domBinding, domMount, type DomMount, type PortalProps } from './mount.js';
+export { Portal, domBinding, domMount, makeDomMount, makeDomBinding, type DomMount, type PortalProps, } from './mount.js';
 export { pages, type PagesMessage, type PagesRequest, type PagesModel, type PagesProgram, type Pagination, } from './pages.js';
-export { program, mapTransition, actionCommand, effectCommand, commandSlot, type CommandSlot, type Command, type Program, type Send, type Transition, } from './program.js';
+export { program, makeProgram, mapTransition, actionCommand, effectCommand, commandSlot, type CommandSlot, type Command, type Program, type Send, type Transition, } from './program.js';
 export { available, resourceComponent, resourceError, type ResourceMessage, type ResourceModel, } from './resource.js';
 export { fromPromise, type UiLoad, type UiPage } from './load.js';
 export { observeBindings, inspectBindings, mountBindingInspector, type BindingInspector, type BindingInspection, observePrograms, type BindingUpdate, type ProgramUpdate, } from './diagnostics.js';
@@ -19,9 +21,9 @@ export { inputText, inputChecked, inputNumber, submit, defineField, type FieldRe
 export { slot, type Slot, type CompiledContent } from './dom.js';
 export { AsyncContent, type AsyncContentProps } from './AsyncContent.js';
 export { defineTasks, type TaskDefinition, type TasksModel, type TasksMessage, type TaskResults, } from './tasks.js';
-export { uiRuntime, type UiRuntime } from './runtime.js';
-export { query, queryGroup, type Query, type QueryKey, type QueryGroup } from './query.js';
-export { makeQueryCache, type QueryCache, type QueryCacheOptions } from './cache.js';
+export { uiRuntime, makeUiRuntime, type UiRuntime } from './runtime.js';
+export { query, queryGroup, type Query, type QueryKey, type QueryGroup, type QueryEncoding, } from './query.js';
+export { makeQueryCache, scopedQueryCache, type QueryCache, type QueryCacheOptions, } from './cache.js';
 export { queryResource, type QueryResource, observeQuery, lifetime, projectionCache, sessionGroup, type SessionContext, type Read, } from './session.js';
 export { httpJson } from './http.js';
 export { infiniteQuery, infiniteResource, type InfiniteData, type InfiniteQuery, type InfiniteResource, } from './infinite-query.js';