@typed/svelte 1.0.0-beta.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present The Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,140 @@
+# @typed/svelte
+
+Svelte 5 components inside Typed templates, and Typed renderables inside Svelte. Both directions create their own `display: contents` hosts, preserve SSR node identity during hydration, and release subscriptions with their rendering scope. The caller keeps ownership of its runtime.
+
+`view` requires `RandomValues` from `@typed/id/RandomValues` for automatic IDs. This service stays in the returned `Fx` requirements. Provide `RandomValues.Default` (or your own implementation) alongside the renderer at the application boundary; the integration does not choose an entropy source.
+
+## Svelte in Typed
+
+```ts
+import { RandomValues } from "@typed/id/RandomValues";
+import { Fx, RefSubject } from "@typed/fx";
+import { html } from "@typed/template/RenderTemplate";
+import { DomRenderTemplate, render } from "@typed/template/Render";
+import { view } from "@typed/svelte";
+import { Layer } from "effect";
+import Counter from "./Counter.svelte";
+
+const application = Fx.gen(function* () {
+  const props = yield* RefSubject.make({ label: "Count" });
+  const content = html`<main>${view(Counter, props)}</main>`;
+
+  return render(content, document.body);
+}).pipe(Fx.drainLayer, Layer.provide(Layer.merge(DomRenderTemplate, RandomValues.Default)));
+
+const program = Layer.launch(application);
+```
+
+`view(component, props, options?)` accepts a props object, `Effect`, `Stream`, or `Fx` (including `RefSubject`). Component props determine the required shape; the source's errors and required services remain in the returned `Fx`. It mounts once and updates a Svelte store, preserving component state. Once the first render event is published, the ambient Scope keeps the component live even if a consumer takes only that event. Cancellation before the first output releases pending acquisition. Nested published islands remain owned by their rendering Scope even when a sibling prevents the parent from publishing. A finite props source leaves the component mounted until cleanup. `context`, `intro`, `outro`, `recover`, `idPrefix`, `csp`, and `transformError` forward to the corresponding Svelte API.
+
+Typed supplies the host through a native element ref. Svelte mounts at that ref and schedules its own commit. For a nested island, refs can run before Typed places the surrounding parent; `onMount` is not a guarantee that the parent is attached. The first Typed output describes the host, and subsequent props update the same component.
+
+`view` selects its backend from the native `DomRenderEvent` or `HtmlRenderEvent` produced by its host template. Supply Typed's ordinary `DomRenderTemplate`, `HtmlRenderTemplate`, or `StaticHtmlRenderTemplate` and Scope at the application render boundary. No Svelte renderer layer or service is required. Both backends expose the current Effect context to the Svelte component, so native context and reactive helpers can read application services, navigation, and the current route without creating another runtime. Explicit Svelte `context` entries override inherited entries.
+
+## Server rendering and hydration
+
+```ts
+import * as Layer from "effect/Layer";
+import { RandomValues } from "@typed/id/RandomValues";
+import { view } from "@typed/svelte";
+import { Fx } from "@typed/fx";
+import { HtmlRenderTemplate, renderToHtml, renderToHtmlString } from "@typed/template/Html";
+import { Effect } from "effect";
+
+const page = view(Counter, { label: "Count" });
+const chunks = renderToHtml(page).pipe(
+  Fx.provide(Layer.merge(HtmlRenderTemplate, RandomValues.Default)),
+);
+
+// Collect a complete string when needed, including static generation.
+const body = await Effect.runPromise(
+  renderToHtmlString(page).pipe(
+    Effect.provide(Layer.merge(HtmlRenderTemplate, RandomValues.Default)),
+    Effect.scoped,
+  ),
+);
+```
+
+Prefer `renderToHtml` when the response can consume chunks. The application observes that Fx within its request Scope, supplies the native HTML renderer, and closes the scope when the response completes or is interrupted. Use `StaticHtmlRenderTemplate` for static generation without Typed hydration markers.
+
+The surrounding Typed template and Svelte host stream before the component is ready. Svelte's public server renderer returns a complete `body` and `head`, so the component body arrives together after its first props value and asynchronous rendering finish. Application service requirements and source errors stay in the Effect type. `onHead` is optional and receives application `<svelte:head>` output; omit it when the component has no head content.
+
+On the client, pass the same Typed template and its server root to `render`. Hydration is automatic. Typed creates an ordinary `div` host and a child range through its native template path. The HTML backend renders Svelte's serialized body into that range; the DOM backend hands its children to Svelte for mounting or hydration. Client and server need matching initial props and component structure. Host identity is generated automatically and restored from server markup during hydration; `options.id` remains an explicit override. Explicit ids must be nonempty and unique across the page; the host id also defaults Svelte's server `idPrefix`.
+
+`@typed/svelte` and `@typed/svelte/Typed.svelte` import in Node without `document` or a `.svelte` loader. The package publishes separate compiled client and server components selected through native package conditions. Application Svelte components use their normal Svelte compilation.
+
+## Typed in Svelte
+
+```svelte
+<script lang="ts">
+  import Typed from "@typed/svelte/Typed.svelte";
+  import { html } from "@typed/template/RenderTemplate";
+  import { Effect } from "effect";
+
+  let { count } = $props();
+  const content = html`<button onclick=${Effect.sync(() => console.log("clicked"))}>
+    ${count}
+  </button>`;
+</script>
+
+<Typed value={content} />
+```
+
+`Typed` accepts any Typed `Renderable` as its `value`, including primitive values, templates, `Effect`, `Stream`, and `Fx`. Its automatically created `div` host has `display: contents`. The optional `id` prop defaults to Svelte's `$props.id()`, stable across SSR and hydration. Views without application services need no runtime. The optional `runtime` prop or nearest `provideRuntime` context supplies application services when needed. Runtime changes or view replacements close the previous rendering scope before starting the next.
+
+Use Svelte's own APIs for SSR, static generation, and hydration:
+
+```ts
+// Server or static build
+import { render } from "svelte/server";
+const { head, body } = await render(App, { props: { count: 0 } });
+
+// Browser, with that HTML already in target
+import { hydrate } from "svelte";
+const app = hydrate(App, { target, props: { count: 0 } });
+```
+
+The component supplies `HtmlRenderTemplate` and Scope during native Svelte SSR, then supplies `DomRenderTemplate` through its Svelte attachment in the browser. It awaits Typed's HTML rendering. Each response closes its observation scope while leaving a supplied runtime owned by the caller. Svelte retains the server HTML at the opaque boundary, and Typed hydrates its original nodes. Client-only `mount` starts the live view normally. No manually prepared HTML or integration rendering helper is needed. The package compiles its asynchronous component, so consumers do not need to enable Svelte's experimental async compiler option. As with other asynchronous Svelte components, use `await render(...)` on the server.
+
+`onReady` fires after the first Typed output attaches; `onError` receives typed failures or renderer defects as an Effect `Cause`. Without `onError`, the host dispatches `typed:error`. Normal interruption is silent. Updating these callbacks or `stopPropagation` preserves the current Typed render; replacing `runtime` or `value` closes and replaces it. Component cleanup never calls `runtime.dispose()`.
+
+For an existing element, the lower-level `attachment(runtime, view, options?)` from `@typed/svelte/Attachment` works with Svelte's `{@attach}` syntax. The component is the usual choice when you want automatic hosting and SSR.
+
+## Stores, services, and routes
+
+- `toReadable(fx, initial)` returns an Effect acquiring a readable Svelte store in the current Scope.
+- `toWritable(ref)` returns an Effect acquiring a writable store backed by a `RefSubject`. Svelte writes publish synchronously and use the captured Effect context. Writes stop after scope closure.
+- `fromReadable(store)` returns an `Fx` that subscribes when observed and unsubscribes on interruption.
+- These store conversions accept non-failing sources because Svelte stores have no error channel. `useSource` and `useAsyncData` expose failures and pending states through Typed's `AsyncData` model.
+- `provideRuntime`, `provideServices`, `useRuntime`, and `useService` use Svelte context and borrowed runtime facades. Reactive runtime stores propagate provider replacements.
+- `useSource`, `useAsyncData`, and `useRefSubject` own work for the Svelte component lifetime. Browser observation starts after mount; server rendering never starts source effects. `useSource` and `useAsyncData` render the provided `initial` snapshot.
+- `useRefSubject(ref, options?)` observes through `useSource` after mount and starts with `undefined` and `NoData`. Values and failures arrive through the normal RefSubject subscription; it does not inspect or execute the ref during component setup. Pass `{ initial: snapshot }` on both server and client when hydration needs an explicit first value; this also narrows the store value from `A | undefined` to `A`. Its `set` and `update` methods accept `A`, return `Promise<Exit>`, and publish after the RefSubject's serialized transaction settles. Read and write failures remain visible in `.state` when native bindings ignore those results. Runtime replacement and unmount interrupt pending writes.
+- `useNavigation`, `useLocation`, `useCurrentPath`, `useCurrentRoute`, `useRoute`, and `provideCurrentRoute` use Typed's actual Navigation, Matcher, decoded params, and structural CurrentRoute services.
+
+`useRoute(route, { currentRoute })` accepts a `CurrentRouteTree` or native Svelte readable store. Omission matches relative to the ambient mount and returns `None` outside it. An explicit tree replaces that mount and applies its prefix once; unmatched paths inside it return `None`, while paths outside it retain Typed's `RouteNotFound` failure. Updating the root store restarts observation with the new context. `provideCurrentRoute` continues to set the structural context inherited by descendants.
+
+The capabilities are also available through `/Runtime`, `/Reactive`, `/AsyncData`, `/Router`, and `/Store` subpaths. Tests can provide the same Effect service layers, `TestRouter`, or an injected render document used by application code.
+
+The hosts are ordinary HTML `div` elements. Place islands in normal HTML content; parser-sensitive table children and SVG children require an appropriate surrounding HTML element. This package targets Svelte 5.57 or newer.
+
+## Event propagation at roots
+
+Events bubble normally by default. Set `stopPropagation` on `view` options, `<Typed>`, or `attachment` options to select native event names:
+
+```ts
+view(Counter, props, { id: "counter", stopPropagation: { click: true, keydown: false } });
+```
+
+A `true` entry stops that event when it reaches the automatic host. A `false` entry allows it, overriding an inherited setting. Set the entire option to `false` to disable the inherited policy; omit it to inherit `CurrentRootEvents` from `@typed/template/RootEvents`. The reference defaults to `false` and can be provided with normal Effect service layers, including test layers.
+
+The listener runs during bubbling, so component handlers still work. It does not call `preventDefault`, use capture listeners, or stop other handlers on the same root. Ancestor capture listeners have already run; non-bubbling events do not reach this listener. This is a per-event propagation choice, not complete event isolation. Root listeners are scoped to the host and removed on cleanup; `<Typed>` also replaces them when its policy changes.
+
+`prefetch(source)` from `/Reactive` samples a value, Effect, Stream, or Fx into an `AsyncData` snapshot in a fresh request scope. Run it through the request runtime, then pass the result as `initial` to `useSource` for matching SSR and hydration. Source failures become failure snapshots; an empty source becomes `NoData`. Use the same helpers with `TestRouter`, injected services, or a test document to exercise server, browser, and test environments.
+
+## Checking Svelte files
+
+Run `pnpm --filter @typed/svelte check:svelte` to check the package's `.svelte` components, test fixtures, and TypeScript files. `build`, `build:components`, and `test:types` include this check and fail on errors or warnings.
+
+Each check recreates the generated `.svelte-check` files so deleted or renamed components cannot leave stale diagnostics.
+
+`svelte.config.js` supplies the asynchronous compiler option to the editor, Vite, and the component build. Keep compiler options there so these environments agree. The checker uses TypeScript 7 through `--tsgo`; the TypeScript 6 dependency supplies the JavaScript compiler API that Svelte's tooling also requires.

package/dist/AsyncData.d.ts

@@ -0,0 +1,23 @@
+import * as AsyncData from "@typed/async-data";
+import type * as Cause from "effect/Cause";
+import * as Option from "effect/Option";
+import { type Readable } from "svelte/store";
+/** Native stores describing one async producer and its last available value. */
+export interface AsyncState<A, E> {
+    readonly data: Readable<AsyncData.AsyncData<A, E>>;
+    readonly value: Readable<Option.Option<A>>;
+    readonly latest: Readable<Option.Option<A>>;
+    readonly cause: Readable<Option.Option<Cause.Cause<E>>>;
+    readonly error: Readable<Option.Option<E>>;
+    readonly pending: Readable<boolean>;
+    readonly loading: Readable<boolean>;
+    readonly refreshing: Readable<boolean>;
+    readonly success: Readable<boolean>;
+    readonly failure: Readable<boolean>;
+    readonly optimistic: Readable<boolean>;
+    readonly refresh: () => void;
+    readonly cancel: () => void;
+}
+/** Derives status from Typed AsyncData, including optimistic and refreshing states. */
+export declare function asyncState<A, E>(data: Readable<AsyncData.AsyncData<A, E>>, controls?: Pick<AsyncState<A, E>, "refresh" | "cancel">): AsyncState<A, E>;
+//# sourceMappingURL=AsyncData.d.ts.map

package/dist/AsyncData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncData.d.ts","sourceRoot":"","sources":["../src/AsyncData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,mBAAmB,CAAC;AAC/C,OAAO,KAAK,KAAK,KAAK,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,EAAW,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEtD,gFAAgF;AAChF,MAAM,WAAW,UAAU,CAAC,CAAC,EAAE,CAAC;IAC9B,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACnD,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACxD,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACvC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACvC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,uFAAuF;AACvF,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,EAC7B,IAAI,EAAE,QAAQ,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EACzC,QAAQ,GAAE,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,GAAG,QAAQ,CAA2C,GAC/F,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,CAyBlB"}

package/dist/AsyncData.js

@@ -0,0 +1,28 @@
+import * as AsyncData from "@typed/async-data";
+import * as Option from "effect/Option";
+import { derived } from "svelte/store";
+/** Derives status from Typed AsyncData, including optimistic and refreshing states. */
+export function asyncState(data, controls = { refresh: () => { }, cancel: () => { } }) {
+    let latest = Option.none();
+    // Share one projection, so `latest` advances even when only another field is subscribed.
+    const snapshot = derived(data, (state) => {
+        const value = AsyncData.getSuccess(state);
+        if (Option.isSome(value))
+            latest = value;
+        return { state, value, latest };
+    });
+    return {
+        data: derived(snapshot, (s) => s.state),
+        value: derived(snapshot, (s) => s.value),
+        latest: derived(snapshot, (s) => s.latest),
+        cause: derived(snapshot, (s) => AsyncData.getCause(s.state)),
+        error: derived(snapshot, (s) => AsyncData.getError(s.state)),
+        pending: derived(snapshot, (s) => AsyncData.isPending(s.state)),
+        loading: derived(snapshot, (s) => AsyncData.isLoading(s.state)),
+        refreshing: derived(snapshot, (s) => AsyncData.isRefreshing(s.state)),
+        success: derived(snapshot, (s) => AsyncData.isSuccess(s.state)),
+        failure: derived(snapshot, (s) => AsyncData.isFailure(s.state)),
+        optimistic: derived(snapshot, (s) => AsyncData.isOptimistic(s.state)),
+        ...controls,
+    };
+}

package/dist/Attachment.d.ts

@@ -0,0 +1,16 @@
+import * as Cause from "effect/Cause";
+import type * as Scope from "effect/Scope";
+import type { Renderable } from "@typed/template/Renderable";
+import type { RenderTemplate } from "@typed/template/RenderTemplate";
+import { type RootEventOptions } from "@typed/template/RootEvents";
+import type { Runtime } from "./Runtime.js";
+/** Options for the render scope owned by a native Svelte attachment. */
+export interface AttachmentOptions<E> {
+    readonly stopPropagation?: RootEventOptions;
+    /** Runs after Typed attaches its first output; nested frameworks commit on their own schedule. */
+    readonly onReady?: () => void;
+    readonly onError?: (cause: Cause.Cause<E>) => void;
+}
+/** Supplies the native DOM renderer and a scope while borrowing the runtime. */
+export declare function attachment<const V extends Renderable.Any, ER = never>(runtime: Pick<Runtime<Exclude<Exclude<Renderable.Services<V>, RenderTemplate>, Scope.Scope>, ER>, "runFork">, value: V, options?: AttachmentOptions<Renderable.Error<V> | ER>): (element: HTMLElement) => () => void;
+//# sourceMappingURL=Attachment.d.ts.map

package/dist/Attachment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attachment.d.ts","sourceRoot":"","sources":["../src/Attachment.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAItC,OAAO,KAAK,KAAK,KAAK,MAAM,cAAc,CAAC;AAI3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE5C,wEAAwE;AACxE,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,QAAQ,CAAC,eAAe,CAAC,EAAE,gBAAgB,CAAC;IAE5C,kGAAkG;IAClG,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAE9B,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACpD;AAID,gFAAgF;AAChF,wBAAgB,UAAU,CAAC,KAAK,CAAC,CAAC,SAAS,UAAU,CAAC,GAAG,EAAE,EAAE,GAAG,KAAK,EACnE,OAAO,EAAE,IAAI,CACX,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,EAClF,SAAS,CACV,EACD,KAAK,EAAE,CAAC,EACR,OAAO,GAAE,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CAAM,GACxD,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,IAAI,CAqBtC"}

package/dist/Attachment.js

@@ -0,0 +1,56 @@
+import * as Cause from "effect/Cause";
+import * as Effect from "effect/Effect";
+import * as Fiber from "effect/Fiber";
+import * as Layer from "effect/Layer";
+import * as Fx from "@typed/fx/Fx";
+import * as Subject from "@typed/fx/Subject";
+import { DomRenderTemplate, render } from "@typed/template/Render";
+import { rootEvents } from "@typed/template/RootEvents";
+const assignments = new WeakMap();
+/** Supplies the native DOM renderer and a scope while borrowing the runtime. */
+export function attachment(runtime, value, options = {}) {
+    return (element) => {
+        const view = Fx.fromEffect(Effect.acquireUseRelease(Effect.sync(() => runtime.runFork(Layer.launch(renderLayer(value, element, options)))), Fiber.join, Fiber.interrupt)).pipe(Fx.catchCause((cause) => {
+            if (!Cause.hasInterruptsOnly(cause)) {
+                if (options.onError)
+                    options.onError(cause);
+                else
+                    element.dispatchEvent(new CustomEvent("typed:error", { detail: cause }));
+            }
+            return Fx.empty;
+        }));
+        return (assignments.get(element) ?? mount(element))(view);
+    };
+}
+function mount(element) {
+    const changes = Subject.unsafeMake(1);
+    let current;
+    Effect.runFork(changes.pipe(Fx.switchMap((view) => Fx.suspend(() => (current === view ? view : Fx.empty))), Fx.ensuring(Effect.sync(() => {
+        if (assignments.get(element) === assign)
+            assignments.delete(element);
+    })), Fx.drain, Effect.scoped));
+    function assign(view) {
+        current = view;
+        Effect.runFork(changes.onSuccess(view));
+        return () => {
+            if (current !== view)
+                return;
+            current = undefined;
+            Effect.runFork(changes.onSuccess(Fx.empty).pipe(Effect.andThen(() => {
+                if (current !== undefined)
+                    return Effect.void;
+                if (assignments.get(element) === assign)
+                    assignments.delete(element);
+                return changes.interrupt;
+            })));
+        };
+    }
+    assignments.set(element, assign);
+    return assign;
+}
+const renderLayer = (value, element, options) => Fx.gen(function* () {
+    const ready = yield* Effect.cached(Effect.sync(() => options.onReady?.()));
+    if (options.stopPropagation !== false)
+        yield* rootEvents(element, options.stopPropagation);
+    return render(value, element).pipe(Fx.tap(() => ready));
+}).pipe(Fx.provide(DomRenderTemplate.using(element.ownerDocument)), Fx.drain, Layer.effectDiscard);

package/dist/Reactive.d.ts

@@ -0,0 +1,54 @@
+import * as AsyncData from "@typed/async-data";
+import * as RefSubject from "@typed/fx/RefSubject";
+import type * as Context from "effect/Context";
+import * as Effect from "effect/Effect";
+import * as Exit from "effect/Exit";
+import * as Scope from "effect/Scope";
+import { type Readable } from "svelte/store";
+import { type AsyncState } from "./AsyncData.js";
+import { type RuntimeSource } from "./Runtime.js";
+import { type Source } from "./Source.js";
+export interface SourceOptions<A, E, R, ER = never> {
+    readonly runtime?: RuntimeSource<Exclude<R, Scope.Scope>, ER>;
+    /** Used synchronously during SSR and the client's first render. */
+    readonly initial?: AsyncData.AsyncData<A, E | ER>;
+}
+/**
+ * Resolves a request-local first snapshot and closes its subscription scope.
+ * Pass the result as `initial` to both server rendering and client hydration.
+ * Empty sources yield NoData; failure causes become AsyncData failures.
+ */
+export declare const prefetch: <A, E = never, R = never>(source: Source<A, E, R>) => Effect.Effect<AsyncData.AsyncData<A, E>, never, Exclude<R, Scope.Scope>>;
+/**
+ * Observes an Effect, Stream, Fx, or value after mount. A Svelte source store or
+ * runtime store can replace the producer; the previous scope closes first.
+ * Server rendering reads only `initial`, and never starts application effects.
+ */
+export declare function useSource<A, E = never, R = never, ER = never>(source: Source<A, E, R> | Readable<Source<A, E, R>>, options?: SourceOptions<A, E, R, ER>): AsyncState<A, E | ER>;
+/** Observes an existing AsyncData producer without nesting its state model. */
+export declare function useAsyncData<A, E, E2 = never, R = never, ER = never>(source: Source<AsyncData.AsyncData<A, E>, E2, R> | Readable<Source<AsyncData.AsyncData<A, E>, E2, R>>, options?: SourceOptions<A, E | E2, R, ER>): AsyncState<A, E | E2 | ER>;
+/** Reads any Effect service using the same runtime, SSR, and failure contract. */
+export declare function useService<I, A, ER = never>(service: Context.Service<I, A>, options?: SourceOptions<A, never, I, ER>): AsyncState<A, ER>;
+/** A native writable whose transactional writes settle with typed Exit results. */
+export interface RefSubjectStore<A, E, Initial = undefined> extends Readable<A | Initial> {
+    readonly state: AsyncState<A, E>;
+    readonly set: (value: A) => Promise<Exit.Exit<A, E>>;
+    readonly update: (f: (value: A) => A) => Promise<Exit.Exit<A, E>>;
+}
+export interface RefSubjectOptions<A, E, R, ER = never> extends Omit<SourceOptions<A, E, R, ER>, "initial"> {
+    /** Overrides the first server/client snapshot, including for an uninitialized ref. */
+    readonly initial?: A;
+}
+/**
+ * Observes any RefSubject, including hydrated refs with typed failures. Writes
+ * use its serialized transactions; failures also reach `state` when a native
+ * binding ignores the returned Exit. Unmount/runtime replacement cancels writes.
+ * The first subscription receives the optional initial value or `undefined`.
+ * Lazy initializers only start after mount; `initial` can seed matching SSR and
+ * hydration values without executing application effects during rendering.
+ */
+export declare function useRefSubject<A, E = never, R = never, ER = never>(ref: RefSubject.RefSubject<A, E, R>, options: RefSubjectOptions<A, E, R, ER> & {
+    readonly initial: A;
+}): RefSubjectStore<A, E | ER, never>;
+export declare function useRefSubject<A, E = never, R = never, ER = never>(ref: RefSubject.RefSubject<A, E, R>, options?: RefSubjectOptions<A, E, R, ER>): RefSubjectStore<A, E | ER>;
+//# sourceMappingURL=Reactive.d.ts.map

package/dist/Reactive.d.ts.map

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

package/dist/Reactive.js

@@ -0,0 +1,180 @@
+import * as AsyncData from "@typed/async-data";
+import * as Fx from "@typed/fx/Fx";
+import * as RefSubject from "@typed/fx/RefSubject";
+import * as Cause from "effect/Cause";
+import * as Effect from "effect/Effect";
+import * as Exit from "effect/Exit";
+import * as Fiber from "effect/Fiber";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import * as Scope from "effect/Scope";
+import { onMount } from "svelte";
+import { derived, get, writable } from "svelte/store";
+import { asyncState } from "./AsyncData.js";
+import { asReadable, useRuntime } from "./Runtime.js";
+import { toFx } from "./Source.js";
+/**
+ * Resolves a request-local first snapshot and closes its subscription scope.
+ * Pass the result as `initial` to both server rendering and client hydration.
+ * Empty sources yield NoData; failure causes become AsyncData failures.
+ */
+export const prefetch = Effect.fn(function (source) {
+    return Fx.first(toFx(source)).pipe(Effect.scoped, Effect.matchCause({
+        onFailure: AsyncData.failure,
+        onSuccess: Option.match({ onNone: () => AsyncData.NoData, onSome: AsyncData.success }),
+    }));
+});
+/**
+ * Observes an Effect, Stream, Fx, or value after mount. A Svelte source store or
+ * runtime store can replace the producer; the previous scope closes first.
+ * Server rendering reads only `initial`, and never starts application effects.
+ */
+export function useSource(source, options = {}) {
+    const runtime = options.runtime
+        ? asReadable(options.runtime)
+        : useRuntime();
+    const sources = asReadable(source);
+    const data = writable(options.initial ?? AsyncData.NoData);
+    let mounted = false;
+    let running;
+    let refreshCurrent;
+    let cancelCurrent;
+    const settle = () => data.update(AsyncData.stopLoading);
+    const cancel = () => {
+        if (mounted)
+            cancelCurrent?.();
+        else
+            running?.interruptUnsafe();
+        settle();
+    };
+    const refresh = () => {
+        if (mounted)
+            refreshCurrent?.();
+    };
+    const state = asyncState(data, { refresh, cancel });
+    onMount(() => {
+        mounted = true;
+        const snapshots = derived([runtime, sources], ([currentRuntime, currentSource]) => ({
+            runtime: currentRuntime,
+            source: currentSource,
+        }));
+        const changes = Fx.callback((emit) => {
+            const stopSnapshots = snapshots.subscribe((snapshot) => emit.succeed({ _tag: "replace", snapshot }));
+            refreshCurrent = () => void emit.succeed({ _tag: "refresh" });
+            cancelCurrent = () => void emit.succeed({ _tag: "cancel" });
+            return Effect.sync(() => {
+                stopSnapshots();
+                refreshCurrent = undefined;
+                cancelCurrent = undefined;
+            });
+        });
+        const requests = changes.pipe(Fx.skipRepeatsWith((left, right) => left._tag === "replace" &&
+            right._tag === "replace" &&
+            left.snapshot.runtime === right.snapshot.runtime &&
+            left.snapshot.source === right.snapshot.source));
+        const lifecycle = Fx.switchMapEffect(requests, (request) => Effect.suspend(() => {
+            if (request._tag === "cancel")
+                return Effect.void;
+            const currentRuntime = get(runtime);
+            const currentSource = get(sources);
+            if (request._tag === "replace" &&
+                (request.snapshot.runtime !== currentRuntime || request.snapshot.source !== currentSource))
+                return Effect.void;
+            data.update(AsyncData.startLoading);
+            return Effect.acquireUseRelease(Effect.sync(() => currentRuntime.runFork(toFx(currentSource).pipe(Fx.map(AsyncData.success), Fx.observe((value) => data.set(value)), Effect.andThen(Effect.sync(settle)), Layer.effectDiscard, Layer.launch))), Fiber.join, Fiber.interrupt).pipe(Effect.catchCause((cause) => Effect.sync(() => {
+                if (mounted && !Cause.hasInterruptsOnly(cause))
+                    data.set(AsyncData.failure(cause));
+            })));
+        }));
+        running = Effect.runFork(Effect.scoped(Fx.drain(lifecycle)));
+        return () => {
+            mounted = false;
+            cancel();
+        };
+    });
+    return state;
+}
+/** Observes an existing AsyncData producer without nesting its state model. */
+export function useAsyncData(source, options = {}) {
+    const outer = useSource(source, {
+        runtime: options.runtime,
+        initial: AsyncData.success(options.initial ?? AsyncData.NoData),
+    });
+    const data = derived(outer.data, (state) => AsyncData.flatMap(state, (value, outer) => AsyncData.isPending(outer) ? AsyncData.startLoading(value) : value));
+    const state = asyncState(data, { refresh: outer.refresh, cancel: outer.cancel });
+    onMount(() => state.data.subscribe(() => { }));
+    return state;
+}
+/** Reads any Effect service using the same runtime, SSR, and failure contract. */
+export function useService(service, options = {}) {
+    return useSource(Effect.service(service), options);
+}
+export function useRefSubject(ref, options = {}) {
+    const runtime = options.runtime
+        ? asReadable(options.runtime)
+        : useRuntime();
+    const initial = "initial" in options ? AsyncData.success(options.initial) : AsyncData.NoData;
+    const observed = useSource(ref, { runtime, initial });
+    const values = writable(Option.getOrUndefined(AsyncData.getSuccess(initial)));
+    const result = writable(undefined);
+    let writes = Scope.makeUnsafe("parallel");
+    let active = false;
+    let revision = 0;
+    const abort = () => {
+        revision++;
+        Effect.runFork(Scope.close(writes, Exit.interrupt()));
+        if (active)
+            writes = Scope.makeUnsafe("parallel");
+    };
+    const state = asyncState(derived([observed.data, result], ([data, written]) => written ?? data), {
+        refresh: () => {
+            result.set(undefined);
+            observed.refresh();
+        },
+        cancel: () => {
+            abort();
+            observed.cancel();
+        },
+    });
+    onMount(() => {
+        active = true;
+        const stopRuntime = runtime.subscribe(abort);
+        const stopSource = observed.data.subscribe((data) => {
+            result.set(undefined);
+            const value = AsyncData.getSuccess(data);
+            if (Option.isSome(value))
+                values.set(value.value);
+        });
+        const track = state.data.subscribe(() => { });
+        return () => {
+            active = false;
+            abort();
+            stopRuntime();
+            stopSource();
+            track();
+        };
+    });
+    const run = async (effect) => {
+        if (!active)
+            return Exit.interrupt();
+        const token = ++revision;
+        const exit = await get(runtime).runPromiseExit(Effect.scoped(effect), {
+            onFiberStart: Fiber.runIn(writes),
+        });
+        if (active && token === revision) {
+            if (Exit.isSuccess(exit)) {
+                values.set(exit.value);
+                if (AsyncData.isFailure(get(observed.data)))
+                    observed.refresh();
+            }
+            result.set(AsyncData.fromExit(exit));
+        }
+        return exit;
+    };
+    return {
+        subscribe: values.subscribe,
+        set: (value) => run(RefSubject.set(ref, value)),
+        update: (f) => run(RefSubject.update(ref, f)),
+        state,
+    };
+}

package/dist/Router.d.ts

@@ -0,0 +1,100 @@
+import { Navigation } from "@typed/navigation/Navigation";
+import type { Destination } from "@typed/navigation/model";
+import { CurrentRoute, type CurrentRouteTree } from "@typed/router/CurrentRoute";
+import * as Matcher from "@typed/router/Matcher";
+import * as Route from "@typed/router/Route";
+import type { Router } from "@typed/router/Router";
+import * as Option from "effect/Option";
+import type * as Scope from "effect/Scope";
+import { type Readable } from "svelte/store";
+import { type SourceOptions } from "./Reactive.js";
+import { type RuntimeSource, type Runtime } from "./Runtime.js";
+/** Follows committed entries from browser, server memory, or test Navigation. */
+export declare function useLocation<ER = never>(options?: SourceOptions<Destination, never, Navigation, ER>): import("./AsyncData.js").AsyncState<{
+    readonly url: URL;
+    readonly state: unknown;
+    readonly sameDocument: boolean;
+    readonly id: string;
+    readonly key: string;
+}, ER>;
+/** Follows the canonical pathname plus query used by Typed's Matcher. */
+export declare function useCurrentPath<ER = never>(options?: SourceOptions<string, never, Navigation, ER>): import("./AsyncData.js").AsyncState<string, ER>;
+/** Reads the structural route owner; navigation does not rewrite this tree. */
+export declare function useCurrentRoute<ER = never>(options?: SourceOptions<CurrentRouteTree, never, CurrentRoute, ER>): import("./AsyncData.js").AsyncState<CurrentRouteTree, ER>;
+/**
+ * Native state plus promise commands using the closest Navigation service.
+ * Commands use the latest provider after runtime replacement.
+ */
+export declare function useNavigation<ER = never>(options?: SourceOptions<Destination, never, Navigation, ER>): {
+    location: import("./AsyncData.js").AsyncState<{
+        readonly url: URL;
+        readonly state: unknown;
+        readonly sameDocument: boolean;
+        readonly id: string;
+        readonly key: string;
+    }, ER>;
+    entries: import("./AsyncData.js").AsyncState<readonly {
+        readonly url: URL;
+        readonly state: unknown;
+        readonly sameDocument: boolean;
+        readonly id: string;
+        readonly key: string;
+    }[], ER>;
+    transition: import("./AsyncData.js").AsyncState<Option.Option<{
+        readonly type: "push" | "reload" | "replace" | "traverse";
+        readonly from: {
+            readonly url: URL;
+            readonly state: unknown;
+            readonly sameDocument: boolean;
+            readonly id: string;
+            readonly key: string;
+        };
+        readonly to: {
+            readonly url: URL;
+            readonly state: unknown;
+            readonly sameDocument: boolean;
+            readonly key?: string | undefined;
+        };
+        readonly info?: unknown;
+    }>, ER>;
+    canGoBack: import("./AsyncData.js").AsyncState<boolean, ER>;
+    canGoForward: import("./AsyncData.js").AsyncState<boolean, ER>;
+    navigate: (...args: Parameters<typeof Navigation.navigate>) => Promise<{
+        readonly url: URL;
+        readonly state: unknown;
+        readonly sameDocument: boolean;
+        readonly id: string;
+        readonly key: string;
+    }>;
+    back: (...args: Parameters<typeof Navigation.back>) => Promise<{
+        readonly url: URL;
+        readonly state: unknown;
+        readonly sameDocument: boolean;
+        readonly id: string;
+        readonly key: string;
+    }>;
+    forward: (...args: Parameters<typeof Navigation.forward>) => Promise<{
+        readonly url: URL;
+        readonly state: unknown;
+        readonly sameDocument: boolean;
+        readonly id: string;
+        readonly key: string;
+    }>;
+};
+/** Options for matching one route through Typed's native matcher. */
+export interface RouteOptions<Rt extends Route.Route.Any, ER = never> extends SourceOptions<Option.Option<Route.Route.Type<Rt>>, Matcher.RouteNotFound | Matcher.RouteDecodeError | Matcher.RouteGuardError, Router | Scope.Scope | Route.Route.DecodingServices<Rt>, ER> {
+    /** Replaces the ambient mount. A store changes the matching root reactively. */
+    readonly currentRoute?: CurrentRouteTree | Readable<CurrentRouteTree>;
+}
+/**
+ * Decodes reactive route parameters with Typed's matcher. By default, leaving
+ * the ambient mount yields None. An explicit root confines the wildcard to that
+ * root, so paths outside it retain the native RouteNotFound failure.
+ */
+export declare function useRoute<Rt extends Route.Route.Any, ER = never>(route: Rt, options?: RouteOptions<Rt, ER>): import("./AsyncData.js").AsyncState<Option.Option<Route.Route.Type<Rt>>, ER | Matcher.RouteDecodeError | Matcher.RouteGuardError | Matcher.RouteNotFound>;
+/**
+ * Extends the structural CurrentRoute for descendants, including nested Typed
+ * content. Pass the full mount route, as with CurrentRoute.extend.
+ */
+export declare function provideCurrentRoute<R = never, ER = never>(route: Route.Route.Any, runtime?: RuntimeSource<R, ER>): Readable<Runtime<R | CurrentRoute, ER>>;
+//# sourceMappingURL=Router.d.ts.map