@wardic/solid 1.0.0-rc.3 → 1.0.0-rc.5

package/src/runtime.ts

@@ -19,8 +19,11 @@ import * as FlushGate from "@wardic/dom/FlushGate"
 import * as ProjectionSystem from "@wardic/dom/ProjectionSystem"
 import * as Report from "@wardic/dom/Report"
 import * as Arr from "effect/Array"
+import * as Bool from "effect/Boolean"
+import * as Cause from "effect/Cause"
 import * as Context from "effect/Context"
 import * as Effect from "effect/Effect"
+import * as Exit from "effect/Exit"
 import { constVoid } from "effect/Function"
 import type * as Fiber from "effect/Fiber"
 import * as Layer from "effect/Layer"
@@ -28,6 +31,7 @@ import * as ManagedRuntime from "effect/ManagedRuntime"
 import * as Option from "effect/Option"
 import * as Predicate from "effect/Predicate"
 import { AtomRegistry } from "effect/reactivity"
+import * as Result from "effect/Result"
 import * as UndefinedOr from "effect/UndefinedOr"
 import type { ServerAppear } from "./appear.ts"
 import { clientRegistry, type FeatureRegistry, type FeatureSection, serverRegistry } from "./feature.ts"
@@ -46,6 +50,24 @@ import { settingOf as configSettingOf, type WardicConfigValue } from "./wardic-c
  */
 export type WardicEnv = Layer.Layer<WardicServices, never, never>
 
+/** What a provider fails with when its `env` waits as it builds: the fix, where Effect's own `AsyncFiberError` names neither. */
+const WAITING_ENV =
+  "The WardicProvider's env waits as it builds, and a provider builds it at once, as its first element renders. Build the Layer that waits, such as DevTools.layer(), before the app renders, and give its services in the env: Layer.succeedContext(await Effect.runPromise(Layer.buildWithScope(layer, scope))). See https://wardic.dev/guides/observability."
+
+/**
+ * `env`, built at once, on the runtime's memo map and Scope as it would be unwrapped. A provider
+ * runs its services from a render, so a Layer that waits as it builds, such as `DevTools.layer()`
+ * waiting for its connection, fails the build with {@link WAITING_ENV}; any other failure is its own.
+ */
+const builtAtOnce = (env: WardicEnv): WardicEnv =>
+  Layer.fromBuild((memoMap, scope) => {
+    const exit = Effect.runSyncExit(Layer.buildWithMemoMap(env, memoMap, scope))
+    return Bool.match(Option.exists(Result.getSuccess(Exit.findDefect(exit)), Cause.isAsyncFiberError), {
+      onTrue: () => Effect.die(new Error(WAITING_ENV)),
+      onFalse: () => exit,
+    })
+  })
+
 /** The services a `WardicProvider`'s runtime gives the code run on it: Wardic's Environment, as a union of Effect services. */
 export type WardicServices =
   | Clock.Clock
@@ -193,7 +215,7 @@ export const clientContext = (
   // layout animation starts, and the app's scale correctors.
   const projectionOptions: ProjectionSystem.Options = { reducedMotion: () => build().reducedMotion(), scaleCorrectors }
   const runtime: ProviderRuntime = ManagedRuntime.make(
-    Layer.merge(FlushGate.layer({ batch }), Layer.succeed(ProjectionOptions)(projectionOptions)).pipe(Layer.provideMerge(env)),
+    Layer.merge(FlushGate.layer({ batch }), Layer.succeed(ProjectionOptions)(projectionOptions)).pipe(Layer.provideMerge(builtAtOnce(env))),
   )
   const features = clientRegistry(runtime)
   // Its Instant changes (#443), timed by its Environment's Refresh frames, found at the first.
@@ -262,7 +284,7 @@ const settingOf = (setting: ReducedMotion.Config | undefined, provider: () => Re
  * Appear animations when it has them.
  */
 export const serverContext = (env: WardicEnv, appear: ServerAppear | undefined, reducedMotion: () => ReducedMotion.Config | undefined): WardicContextValue => {
-  const runtime = ManagedRuntime.make(env)
+  const runtime = ManagedRuntime.make(builtAtOnce(env))
   return {
     runtime,
     // A server render's elements take the lean path and never read it: read at each use if one does.

package/src/unstable/v2/index.ts

@@ -24,11 +24,12 @@ export {
  * only those it uses; a Complete element (`wardic.*`, `ward()`) has every one. `colors`: every CSS
  * colour space beyond a hex, `rgb()`, `hsl()` and the colour names. `layout`: layout animations, the
  * props `layout`, `layoutId`, `layoutScroll` and `layoutRoot` (`LayoutGroup` and `Reorder` bring it
- * themselves).
+ * themselves). `scroll`: a container's scroll, which `createScroll` brings itself (#518).
  */
 export type { Feature, FeatureLoad, Features, FeaturesProp } from "../../feature.ts"
 export { colors } from "../../features/colors.ts"
 export { layout } from "../../features/layout.ts"
+export { scroll } from "../../features/scroll.ts"
 /**
  * The gestures (#511, ADR-0067 decision 3), a Feature each: `hover`, `press` (its Keyboard presses
  * included), `focus`, `inView`, `pan` and `drag` (`dragControls` and the release's inertia included).
@@ -209,16 +210,13 @@ export { createAnimationControls, type WardicAnimationControls, type WardicContr
 export {
   createAnimationFrame,
   createFollowValue,
-  createScroll,
   createSpring,
   createTime,
   createTransform,
   createVelocity,
   createWillChange,
-  type ElementSource,
-  type ScrollOptions,
-  type ScrollValues,
 } from "./live-value.ts"
+export { createScroll, type ElementSource, type ScrollOptions, type ScrollValues } from "./live-scroll.ts"
 export type { FollowAccessor, FollowValueOptions, Live, LiveSource, SpringAccessor, WillChange } from "../../live-style.ts"
 
 /**

package/src/unstable/v2/layout.tsx

@@ -67,7 +67,7 @@ export function LayoutGroup(props: LayoutGroupProps): JSX.Element {
   const id = untrack(() => layoutGroupIdOf(outer, props.id, props.inherit))
   // A server render has no projection system to re-measure (ADR-0021). Not at mount: nodes measure
   // themselves as they register.
-  if (Bool.not(isServer)) {
+  if (!isServer) {
     const projection = useWardicProjection()
     // Compared before it measures, as Motion's is: an effect never compares (#618).
     const dependency = createMemo(() => props.layoutDependency, CLIENT_ONLY)

package/src/unstable/v2/live-scroll.ts

@@ -0,0 +1,136 @@
+/**
+ * `createScroll` (#518): in a module of its own, so it brings the `scroll` Feature only to an app that
+ * reads a scroll, and on the pages that do (ADR-0067, *Amendments (#548, #518)*).
+ *
+ * @module
+ */
+import * as LiveValue from "@wardic/core/LiveValue"
+import * as ScrollSource from "@wardic/core/ScrollSource"
+import type * as ScrollOffset from "@wardic/dom/ScrollOffset"
+import * as Arr from "effect/Array"
+import * as Bool from "effect/Boolean"
+import * as Effect from "effect/Effect"
+import * as Option from "effect/Option"
+import * as Predicate from "effect/Predicate"
+import { Atom, AtomRegistry } from "effect/reactivity"
+import * as Rec from "effect/Record"
+import * as Scope from "effect/Scope"
+import * as UndefinedOr from "effect/UndefinedOr"
+import { isServer } from "@solidjs/web"
+import { type Accessor, createEffect, createSignal, onCleanup } from "solid-js"
+import type { Feature } from "../../feature.ts"
+import { scroll } from "../../features/scroll.ts"
+import { serviceOf } from "../../gesture-features.ts"
+import * as OwnerScope from "../../owner-scope.ts"
+import { followAtom } from "./bridge.ts"
+import { CLOSE_FAILED, SERVER_ZERO } from "./live-value.ts"
+import { useBrought, useWardicRuntime } from "./provider.tsx"
+import { CLIENT_ONLY, onSettledClientOnly } from "./solid-reactivity.ts"
+
+/** What it brings (ADR-0067 decision 12): the `scroll` Feature, whatever its section has (#518). */
+const SCROLL: ReadonlyArray<Feature> = [scroll]
+
+/** An element, or an accessor of one, such as `() => box` for a ref: read once it's there. */
+export type ElementSource = Element | Accessor<Element | undefined>
+
+/** `createScroll`'s options, as Motion's `useScroll`'s. */
+export interface ScrollOptions {
+  /** The scrolling element, as an accessor of its ref: `() => box`. The page's scroll when left out. */
+  readonly container?: ElementSource
+  /** An element whose way through the container the progress reads, between the `offset`s. */
+  readonly target?: ElementSource
+  /**
+   * Where the progress runs, as Motion's: each stop pairs an edge of the target with an edge of the
+   * container, `["start end", "end start"]`, 0 at the first and 1 at the last. An edge is `start`,
+   * `center` or `end`, a fraction, or a length. With a target, `["start start", "end end"]` by default.
+   */
+  // The DOM's syntax (`@wardic/dom/ScrollOffset`); with a target and none given, its `All`.
+  readonly offset?: ScrollOffset.ScrollOffset
+  /** The axis `target` and `offset` read: `"y"` (the default) or `"x"`. */
+  readonly axis?: "x" | "y"
+}
+
+/** `createScroll`'s values, Motion's four, each an accessor. */
+export interface ScrollValues {
+  /** How far it's scrolled across, in pixels. */
+  readonly scrollX: Accessor<number>
+  /** How far it's scrolled down, in pixels. */
+  readonly scrollY: Accessor<number>
+  /** Its progress across, from 0 to 1: through its range, or, with a `target` or `offset`, through theirs. */
+  readonly scrollXProgress: Accessor<number>
+  /** Its progress down, from 0 to 1: through its range, or, with a `target` or `offset`, through theirs. */
+  readonly scrollYProgress: Accessor<number>
+}
+
+const SCROLL_KEYS = ["scrollX", "scrollY", "scrollXProgress", "scrollYProgress"] as const
+/** `createScroll`'s elements before the render has settled: none yet. */
+const NOT_YET = { container: Option.none(), target: Option.none() } as const
+const SERVER_SCROLL: ScrollValues = { scrollX: SERVER_ZERO, scrollY: SERVER_ZERO, scrollXProgress: SERVER_ZERO, scrollYProgress: SERVER_ZERO }
+
+/** An element source read now: `None` for an accessor whose ref hasn't arrived. */
+const elementOf = (source: ElementSource | undefined): Option.Option<Element | undefined> =>
+  Bool.match(Predicate.isFunction(source), {
+    onTrue: () => Option.fromUndefinedOr((source as Accessor<Element | undefined>)()),
+    onFalse: () => Option.some(source as Element | undefined),
+  })
+
+/**
+ * A scroll as values: `scrollX` and `scrollY`, how far it's scrolled, in pixels, and `scrollXProgress`
+ * and `scrollYProgress`, from 0 to 1 through its range. The page's, or a `container`'s. With a
+ * `target`, the progress is the target's way through, between two `offset`s, on `axis`. Each is set in
+ * the scroll's own event, so a value derived from one paints in the frame that shows the scroll. A
+ * `container` or `target` given as an accessor of a ref reads 0s until the ref is there. 0s on a
+ * server. Motion's `useScroll`.
+ *
+ * @example
+ * let box!: HTMLDivElement
+ * const { scrollYProgress } = createScroll({ container: () => box })
+ * <div ref={box}>…</div>
+ * <w.div style={{ scaleX: scrollYProgress }} />
+ * @see https://wardic.dev/reference/solid/live-values/create-scroll
+ */
+// #234. An accessor `container` or `target` is read in an effect, and a change of either follows the
+// new one. Each value carries one Atom for its life.
+export const createScroll = (options: ScrollOptions = {}): ScrollValues => {
+  if (isServer) return SERVER_SCROLL
+  const runtime = useWardicRuntime()
+  const services = useBrought(SCROLL)
+  const registry = runtime.runSync(AtomRegistry.AtomRegistry)
+  // Its own four Atoms, set from the scroll of the elements there now.
+  const outs = Rec.fromIterableWith(SCROLL_KEYS, (key) => [key, Atom.make(0)] as const)
+  Arr.forEach(SCROLL_KEYS, (key) => onCleanup(registry.mount(outs[key])))
+  // Its elements are read once the render has settled: a ref given as `() => box` is set during the
+  // render, after this effect's first compute, and isn't a signal, so nothing would read it again.
+  const [settled, setSettled] = createSignal(false)
+  onSettledClientOnly(() => {
+    setSettled(true)
+  })
+  createEffect(
+    () =>
+      Bool.match(settled(), {
+        onTrue: () => ({ container: elementOf(options.container), target: elementOf(options.target) }),
+        onFalse: () => NOT_YET,
+      }),
+    ({ container, target }) => {
+      // A ref not there yet: the values hold until it is.
+      if (Bool.or(Option.isNone(container), Option.isNone(target))) return undefined
+      const scope = OwnerScope.open(runtime)
+      const values = runtime.runSync(
+        LiveValue.scroll({
+          ...UndefinedOr.match(Option.getOrUndefined(container), { onUndefined: () => ({}), onDefined: (element) => ({ container: element }) }),
+          ...UndefinedOr.match(Option.getOrUndefined(target), { onUndefined: () => ({}), onDefined: (element) => ({ target: element }) }),
+          ...UndefinedOr.match(options.offset, { onUndefined: () => ({}), onDefined: (offset) => ({ offset }) }),
+          ...UndefinedOr.match(options.axis, { onUndefined: () => ({}), onDefined: (axis) => ({ axis }) }),
+        }).pipe(Effect.provideService(ScrollSource.ScrollSource, serviceOf(services(), ScrollSource.ScrollSource)), Scope.provide(scope)),
+      )
+      // Each derived Atom is read at once: it tracks the scroll only once it's been read.
+      const stops = Arr.map(SCROLL_KEYS, (key) => registry.subscribe(values[key], (v) => registry.set(outs[key], v), { immediate: true }))
+      return () => {
+        Arr.forEach(stops, (stop) => stop())
+        OwnerScope.close(runtime, scope, CLOSE_FAILED)
+      }
+    },
+    CLIENT_ONLY,
+  )
+  return Rec.map(outs, (atom) => followAtom(registry, atom)) as unknown as ScrollValues
+}

package/src/unstable/v2/live-value.ts

@@ -25,18 +25,14 @@
  */
 import type * as InterpolatorRegistry from "@wardic/core/InterpolatorRegistry"
 import * as LiveValue from "@wardic/core/LiveValue"
-import type * as ScrollOffset from "@wardic/dom/ScrollOffset"
-import * as Arr from "effect/Array"
 import * as Bool from "effect/Boolean"
 import * as Effect from "effect/Effect"
-import * as Option from "effect/Option"
 import * as Predicate from "effect/Predicate"
 import { Atom, AtomRegistry } from "effect/reactivity"
-import * as Rec from "effect/Record"
 import * as Scope from "effect/Scope"
 import * as UndefinedOr from "effect/UndefinedOr"
 import { isServer } from "@solidjs/web"
-import { type Accessor, createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js"
+import { type Accessor, createEffect, createMemo, onCleanup, untrack } from "solid-js"
 import {
   atomOf,
   type FollowAccessor,
@@ -59,7 +55,7 @@ import { eachFrameOf } from "../../animation-frame.ts"
 import * as OwnerScope from "../../owner-scope.ts"
 import { withServerInterpolators } from "../../server-interpolators.ts"
 import { followAtom } from "./bridge.ts"
-import { CLIENT_ONLY, CLIENT_ONLY_DEFERRED, onSettledClientOnly } from "./solid-reactivity.ts"
+import { CLIENT_ONLY, CLIENT_ONLY_DEFERRED } from "./solid-reactivity.ts"
 import { useWardicRuntime, useWardicSkipAnimations } from "./provider.tsx"
 
 /** A Live value read now on a server: an Atom through a server's own registry, an accessor called. */
@@ -87,7 +83,7 @@ const sourceAtomOf = <A>(source: LiveSource<A>, registry: AtomRegistry.AtomRegis
   })
 
 /** What a helper's Scope reports when one of its finalizers fails as its owner goes. */
-const CLOSE_FAILED = "wardic.liveValue: a finalizer failed"
+export const CLOSE_FAILED = "wardic.liveValue: a finalizer failed"
 
 /** A helper's Atom, made on the provider's runtime in a Scope its owner's disposal closes, as an accessor carrying it. */
 const liveOf = <A, R>(runtime: WardicRuntime, live: Effect.Effect<Atom.Atom<A>, never, R>): Accessor<A> => {
@@ -264,7 +260,8 @@ export const createTime = (): Accessor<number> => {
   return liveOf(useWardicRuntime(), LiveValue.time())
 }
 
-const SERVER_ZERO: Accessor<number> = () => 0
+/** A server render's value of a Live helper: 0, and no Atom. Internal. */
+export const SERVER_ZERO: Accessor<number> = () => 0
 
 /**
  * A `will-change` for an element's `style`: `"auto"` until the element first animates a transform key,
@@ -309,106 +306,3 @@ export const createAnimationFrame = (callback: (time: number, delta: number) =>
   runtime.runSync(eachFrameOf(runtime, callback).pipe(Scope.provide(scope)))
 }
 
-/** An element, or an accessor of one, such as `() => box` for a ref: read once it's there. */
-export type ElementSource = Element | Accessor<Element | undefined>
-
-/** `createScroll`'s options, as Motion's `useScroll`'s. */
-export interface ScrollOptions {
-  /** The scrolling element, as an accessor of its ref: `() => box`. The page's scroll when left out. */
-  readonly container?: ElementSource
-  /** An element whose way through the container the progress reads, between the `offset`s. */
-  readonly target?: ElementSource
-  /**
-   * Where the progress runs, as Motion's: each stop pairs an edge of the target with an edge of the
-   * container, `["start end", "end start"]`, 0 at the first and 1 at the last. An edge is `start`,
-   * `center` or `end`, a fraction, or a length. With a target, `["start start", "end end"]` by default.
-   */
-  // The DOM's syntax (`@wardic/dom/ScrollOffset`); with a target and none given, its `All`.
-  readonly offset?: ScrollOffset.ScrollOffset
-  /** The axis `target` and `offset` read: `"y"` (the default) or `"x"`. */
-  readonly axis?: "x" | "y"
-}
-
-/** `createScroll`'s values, Motion's four, each an accessor. */
-export interface ScrollValues {
-  /** How far it's scrolled across, in pixels. */
-  readonly scrollX: Accessor<number>
-  /** How far it's scrolled down, in pixels. */
-  readonly scrollY: Accessor<number>
-  /** Its progress across, from 0 to 1: through its range, or, with a `target` or `offset`, through theirs. */
-  readonly scrollXProgress: Accessor<number>
-  /** Its progress down, from 0 to 1: through its range, or, with a `target` or `offset`, through theirs. */
-  readonly scrollYProgress: Accessor<number>
-}
-
-const SCROLL_KEYS = ["scrollX", "scrollY", "scrollXProgress", "scrollYProgress"] as const
-/** `createScroll`'s elements before the render has settled: none yet. */
-const NOT_YET = { container: Option.none(), target: Option.none() } as const
-const SERVER_SCROLL: ScrollValues = { scrollX: SERVER_ZERO, scrollY: SERVER_ZERO, scrollXProgress: SERVER_ZERO, scrollYProgress: SERVER_ZERO }
-
-/** An element source read now: `None` for an accessor whose ref hasn't arrived. */
-const elementOf = (source: ElementSource | undefined): Option.Option<Element | undefined> =>
-  Bool.match(Predicate.isFunction(source), {
-    onTrue: () => Option.fromUndefinedOr((source as Accessor<Element | undefined>)()),
-    onFalse: () => Option.some(source as Element | undefined),
-  })
-
-/**
- * A scroll as values: `scrollX` and `scrollY`, how far it's scrolled, in pixels, and `scrollXProgress`
- * and `scrollYProgress`, from 0 to 1 through its range. The page's, or a `container`'s. With a
- * `target`, the progress is the target's way through, between two `offset`s, on `axis`. Each is set in
- * the scroll's own event, so a value derived from one paints in the frame that shows the scroll. A
- * `container` or `target` given as an accessor of a ref reads 0s until the ref is there. 0s on a
- * server. Motion's `useScroll`.
- *
- * @example
- * let box!: HTMLDivElement
- * const { scrollYProgress } = createScroll({ container: () => box })
- * <div ref={box}>…</div>
- * <w.div style={{ scaleX: scrollYProgress }} />
- * @see https://wardic.dev/reference/solid/live-values/create-scroll
- */
-// #234. An accessor `container` or `target` is read in an effect, and a change of either follows the
-// new one. Each value carries one Atom for its life.
-export const createScroll = (options: ScrollOptions = {}): ScrollValues => {
-  if (isServer) return SERVER_SCROLL
-  const runtime = useWardicRuntime()
-  const registry = runtime.runSync(AtomRegistry.AtomRegistry)
-  // Its own four Atoms, set from the scroll of the elements there now.
-  const outs = Rec.fromIterableWith(SCROLL_KEYS, (key) => [key, Atom.make(0)] as const)
-  Arr.forEach(SCROLL_KEYS, (key) => onCleanup(registry.mount(outs[key])))
-  // Its elements are read once the render has settled: a ref given as `() => box` is set during the
-  // render, after this effect's first compute, and isn't a signal, so nothing would read it again.
-  const [settled, setSettled] = createSignal(false)
-  onSettledClientOnly(() => {
-    setSettled(true)
-  })
-  createEffect(
-    () =>
-      Bool.match(settled(), {
-        onTrue: () => ({ container: elementOf(options.container), target: elementOf(options.target) }),
-        onFalse: () => NOT_YET,
-      }),
-    ({ container, target }) => {
-      // A ref not there yet: the values hold until it is.
-      if (Bool.or(Option.isNone(container), Option.isNone(target))) return undefined
-      const scope = OwnerScope.open(runtime)
-      const values = runtime.runSync(
-        LiveValue.scroll({
-          ...UndefinedOr.match(Option.getOrUndefined(container), { onUndefined: () => ({}), onDefined: (element) => ({ container: element }) }),
-          ...UndefinedOr.match(Option.getOrUndefined(target), { onUndefined: () => ({}), onDefined: (element) => ({ target: element }) }),
-          ...UndefinedOr.match(options.offset, { onUndefined: () => ({}), onDefined: (offset) => ({ offset }) }),
-          ...UndefinedOr.match(options.axis, { onUndefined: () => ({}), onDefined: (axis) => ({ axis }) }),
-        }).pipe(Scope.provide(scope)),
-      )
-      // Each derived Atom is read at once: it tracks the scroll only once it's been read.
-      const stops = Arr.map(SCROLL_KEYS, (key) => registry.subscribe(values[key], (v) => registry.set(outs[key], v), { immediate: true }))
-      return () => {
-        Arr.forEach(stops, (stop) => stop())
-        OwnerScope.close(runtime, scope, CLOSE_FAILED)
-      }
-    },
-    CLIENT_ONLY,
-  )
-  return Rec.map(outs, (atom) => followAtom(registry, atom)) as unknown as ScrollValues
-}

package/src/unstable/v2/provider.tsx

@@ -77,6 +77,23 @@ const WardicContext = createContext<WardicContextValue | null>(null)
 /** The nearest provider's value, `undefined` outside one. */
 const contextValue = (): WardicContextValue | undefined => Option.getOrUndefined(Option.fromNullishOr(useContext(WardicContext)))
 
+/**
+ * A provider's context: a server render's, inert, or the client's. Decided by a plain `if`: a client
+ * build folds `isServer` and drops the server render's code, where `Bool.match` kept it (#518: 8.4 KB
+ * gzipped in every Solid 2 app). `env` and `appear` are read once, as the provider's docs say.
+ */
+const contextOf = (given: Parameters<typeof WardicProvider>[0]): WardicContextValue => {
+  if (isServer) return serverContext(given.env, serverAppearOf(given.appear, given.reducedMotion, given.nonce), () => untrack(() => given.reducedMotion))
+  return clientContext(
+    given.env,
+    applyAndFlush,
+    () => untrack(() => given.reducedMotion),
+    // The provider's setting, tracked too: `createReducedMotionConfig` reads it where it tracks (#584).
+    () => given.reducedMotion,
+    untrack(() => given.scaleCorrectors),
+  )
+}
+
 /**
  * Puts Wardic in your app: every Wardic element sits under one. Give it the Environment, `DomLive` in
  * a browser, and the Features your elements use.
@@ -91,7 +108,7 @@ const contextValue = (): WardicContextValue | undefined => Option.getOrUndefined
 // unmount, inert during a server render (ADR-0021). reducedMotion is read as each animation starts
 // (ADR-0029), a WardicConfig's over it (#434); appear (ADR-0044, #585) on the server once.
 export function WardicProvider(props: {
-  /** The Environment Wardic runs in: `DomLive` in a browser, from `@wardic/dom`. Read once. */
+  /** The Environment Wardic runs in: `DomLive` in a browser, from `@wardic/dom`. Read once, and built at once: a Layer that waits as it builds fails it. */
   readonly env: WardicEnv
   /**
    * How animations honour the visitor's reduced-motion setting: `"user"` follows it (the default),
@@ -124,18 +141,7 @@ export function WardicProvider(props: {
   readonly strict?: boolean | undefined
   readonly children?: JSX.Element
 }): JSX.Element {
-  const value = Bool.match(isServer, {
-    onTrue: () => serverContext(props.env, serverAppearOf(props.appear, props.reducedMotion, props.nonce), () => untrack(() => props.reducedMotion)),
-    onFalse: () =>
-      clientContext(
-        props.env,
-        applyAndFlush,
-        () => untrack(() => props.reducedMotion),
-        // eslint-disable-next-line solid/reactivity -- the provider's setting, tracked too: `createReducedMotionConfig` reads it where it tracks (#584)
-        () => props.reducedMotion,
-        untrack(() => props.scaleCorrectors),
-      ),
-  })
+  const value = contextOf(props)
   // Disposing the runtime closes its Scope: the projection system, then the gate (#132). Its
   // disposal rejects first, ending every `animateLayout` still waiting: their flights won't end (#257).
   let abort = constUndefined as (reason: DOMException) => void
@@ -156,7 +162,7 @@ export function WardicProvider(props: {
   // element mounted after pays none of it. One mounted before then builds it itself, as before. Asked
   // for here, with no computation of the provider's own (an `onSettled`'s would shift a hydration's
   // owners from the server's), and on the client alone.
-  if (Bool.not(isServer)) onCleanup(whenIdle(() => prepareIdle(value, section)))
+  if (!isServer) onCleanup(whenIdle(() => prepareIdle(value, section)))
   return <WardicContext value={value}>{props.children}</WardicContext>
 }