@wardic/solid 0.0.0-stage → 1.0.0-rc.2

package/src/runtime.ts

@@ -0,0 +1,388 @@
+/**
+ * What a `WardicProvider` holds, for the Solid 1 binding and the Solid 2 one
+ * (`@wardic/solid/unstable/v2`, #209) alike: the Environment's types, the runtime and the services
+ * built over it on first need, and what a server render holds instead. Solid-free: each binding's
+ * provider is a thin shell over it, so the two can't drift.
+ *
+ * @module
+ */
+import type * as Announcer from "@wardic/core/Announcer"
+import type * as Clock from "@wardic/core/Clock"
+import * as DefaultTransition from "@wardic/core/DefaultTransition"
+import type * as FrameLoop from "@wardic/core/FrameLoop"
+import * as InterpolatorRegistry from "@wardic/core/InterpolatorRegistry"
+import * as Probe from "@wardic/core/Probe"
+import * as ReducedMotion from "@wardic/core/ReducedMotion"
+import * as RefreshFrameSource from "@wardic/core/RefreshFrameSource"
+import * as Renderer from "@wardic/core/Renderer"
+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 Context from "effect/Context"
+import * as Effect from "effect/Effect"
+import { constVoid } from "effect/Function"
+import type * as Fiber from "effect/Fiber"
+import * as Layer from "effect/Layer"
+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 UndefinedOr from "effect/UndefinedOr"
+import type { ServerAppear } from "./appear.ts"
+import { clientRegistry, type FeatureRegistry, type FeatureSection, serverRegistry } from "./feature.ts"
+import { type InstantAnimations, makeInstantAnimations, NO_INSTANT } from "./instant.ts"
+import { settingOf as configSettingOf, type WardicConfigValue } from "./wardic-config-value.ts"
+
+/**
+ * The full Wardic environment a `WardicProvider` requires: core's service contracts but the
+ * `InputSource`, the `RefreshFrameSource` the Clock ticks on and the flush gate requests its
+ * flushes from, core's Frame loop over the Clock (`FrameLoop.layer`, which runs every
+ * animation the binding starts), and the `AtomRegistry` that backs reactive service
+ * inputs. Satisfied by `@wardic/dom`'s `DomLive` (real browser) or `@wardic/test`'s
+ * `TestLive` (headless). `ER` and `R` are `never`: a fully self-contained Layer. The `InputSource` is
+ * the gesture Features': built with the first one, over the page, unless
+ * the Environment gives one, as `TestLive` does, which they take.
+ */
+export type WardicEnv = Layer.Layer<WardicServices, never, never>
+
+/** 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
+  | RefreshFrameSource.RefreshFrameSource
+  | FrameLoop.FrameLoop
+  | Renderer.Renderer
+  | Probe.Probe
+  | InterpolatorRegistry.InterpolatorRegistry
+  | ReducedMotion.PositionalKeys
+  | DefaultTransition.DefaultTransition
+  | Announcer.Announcer
+  | AtomRegistry.AtomRegistry
+
+/** A `WardicProvider`'s Effect runtime: a `ManagedRuntime` of its {@link WardicServices}. */
+export type WardicRuntime = ManagedRuntime.ManagedRuntime<WardicServices, never>
+
+/**
+ * What a client provider hands its projection system (#511): whether reduced motion applies now
+ * (ADR-0029), and the app's scale correctors (#443). The `layout` Feature's Layer reads it from the
+ * provider's runtime, as the projection system is no longer built with it.
+ */
+export class ProjectionOptions extends /*#__PURE__*/ Context.Service<ProjectionOptions, ProjectionSystem.Options>()("@wardic/solid/ProjectionOptions") {}
+
+/** What a provider's runtime holds: its Environment, and its flush gate and projection options over it. */
+export type ProviderServices = WardicServices | FlushGate.FlushGate | ProjectionOptions
+
+/** A provider's runtime, as its Features build on it. */
+export type ProviderRuntime = ManagedRuntime.ManagedRuntime<ProviderServices, never>
+
+/** A server render's Positional keys: it builds no runtime, and reduced motion never applies there. */
+export const SERVER_POSITIONAL_KEYS: ReducedMotion.PositionalKeys["Service"] = { isPositional: ReducedMotion.isTransform }
+
+/** A server render's Default transition: it runs no animation (its Appear animations read the DOM's, #48). */
+export const SERVER_DEFAULT_TRANSITION: DefaultTransition.DefaultTransition["Service"] = { transitionFor: () => DefaultTransition.ONE_SPRING, keyframes: DefaultTransition.ONE_TWEEN }
+
+/**
+ * The value a `WardicProvider` carries down the tree: the single Effect runtime
+ * plus the provider-owned flush gate (ADR-0006) built atop it.
+ */
+export interface WardicContextValue {
+  readonly runtime: WardicRuntime
+  readonly gate: FlushGate.Shape
+  /**
+   * Its projection system (ADR-0009), once its `layout` Feature is built (#511): by an element whose
+   * section has it, or a component that brings it. Read as it's needed, so nothing waits on it; and
+   * `undefined` until then, as during a server render, which builds none (ADR-0021).
+   */
+  readonly projection: ProjectionSystem.Shape | undefined
+  /** Whether reduced motion applies now (ADR-0029): read when each animation starts. */
+  readonly reducedMotion: () => boolean
+  /**
+   * Whether reduced motion applies now under `setting` (#434): a `WardicConfig`'s, else the
+   * provider's, with the user's preference. Read when each animation starts.
+   */
+  readonly reducedMotionUnder: (setting: ReducedMotion.Config | undefined) => boolean
+  /**
+   * The provider's own `reducedMotion` setting (#443): `undefined` when it gives none. Tracked, so a
+   * hook that reads it follows a change of it (#584); animations read it untracked, as each starts.
+   */
+  readonly reducedMotionSetting: () => ReducedMotion.Config | undefined
+  /** The Environment's Positional keys (ADR-0036), read once: which keys reduced motion Snaps. */
+  readonly positionalKeys: ReducedMotion.PositionalKeys["Service"]
+  /** The Environment's Default transition (ADR-0051), read once: what a key with no transition of its own runs on. */
+  readonly defaultTransition: DefaultTransition.DefaultTransition["Service"]
+  /**
+   * The Environment's Renderer (ADR-0003), read once: what each element and presence projects its
+   * values with and commits them through.
+   */
+  // #618 (M1): each element read it through `runSync` as it mounted, 196 ns and ~340 B (Node).
+  readonly renderer: Renderer.Renderer["Service"]
+  /** A server render's Appear animations (#48, ADR-0044); none on the client, or with `appear={false}`. */
+  readonly appear?: ServerAppear | undefined
+  /** Whether its animations are instant now (#443, an Instant change's); never on a server. */
+  readonly instant: InstantAnimations
+  /**
+   * Its **Features** (#511, ADR-0067), each built once on first need into the runtime's `MemoMap`; a
+   * server render's run their `server` part alone. Disposing them disposes the runtime after.
+   */
+  readonly features: FeatureRegistry
+  /**
+   * Build what a first element would (#535): the runtime, its Environment and the gate, and the first
+   * animation's code warmed through the interpolators nearly every app uses. A provider runs it at
+   * the browser's idle time once it has mounted; a first element before then builds them itself.
+   * Nothing on a server.
+   */
+  readonly prepare: () => void
+}
+
+/** What a client provider builds on first need (#51): everything in its context but the runtime. */
+interface Built {
+  readonly gate: FlushGate.Shape
+  readonly reducedMotion: () => boolean
+  readonly reducedMotionUnder: (setting: ReducedMotion.Config | undefined) => boolean
+  readonly positionalKeys: ReducedMotion.PositionalKeys["Service"]
+  readonly defaultTransition: DefaultTransition.DefaultTransition["Service"]
+  readonly renderer: Renderer.Renderer["Service"]
+}
+
+/**
+ * A client provider's runtime and context value. The runtime is made once from `env`, over which
+ * it builds the flush gate, running a frame's Starting-style switches through `batch` (ADR-0034:
+ * Solid 1's `batch`, Solid 2's apply-then-`flush()`), a service built by its Layer and ended by its
+ * Scope (#132, ADR-0041). Making it builds nothing (it's Effect's `ManagedRuntime`). The projection
+ * system is the `layout` Feature's (#511), built on the runtime when it's first needed, and ended
+ * before it.
+ *
+ * The rest is built on first need (#51, ADR-0021 *Amendment (#51)*): together, the first time a
+ * Wardic element or hook reads any of it from the context value, which is during the first
+ * element's render. A provider with no Wardic element under it builds nothing. Reading the runtime
+ * alone builds none of it. `reducedMotion` is the provider's setting, read untracked by the caller.
+ */
+export const clientContext = (
+  env: WardicEnv,
+  batch: (apply: () => void) => void,
+  reducedMotion: () => ReducedMotion.Config | undefined,
+  reducedMotionSetting: () => ReducedMotion.Config | undefined,
+  scaleCorrectors?: ProjectionSystem.Options["scaleCorrectors"],
+): WardicContextValue => {
+  let built: Built | undefined
+  const build = (): Built => {
+    if (Predicate.isNotUndefined(built)) return built
+    // The flush gate, one per WardicProvider (ADR-0006): reading it builds the runtime, the
+    // Environment and the gate together.
+    const gate = runtime.runSync(FlushGate.FlushGate)
+    // Whether reduced motion applies now (ADR-0029): the app's setting (a `WardicConfig`'s, #434, else
+    // the provider's) and the user's preference through the Probe's atom. Read when each animation
+    // starts, so a change applies from the next one.
+    const registry = runtime.runSync(AtomRegistry.AtomRegistry)
+    const probe = runtime.runSync(Probe.Probe)
+    const under = (setting: ReducedMotion.Config | undefined): boolean =>
+      ReducedMotion.applies(settingOf(setting, reducedMotion), registry.get(probe.prefersReducedMotion))
+    const applies = (): boolean => under(undefined)
+    // Which keys reduced motion Snaps: the Environment's Positional keys (ADR-0036), read once, as
+    // the Probe is.
+    const positionalKeys = runtime.runSync(ReducedMotion.PositionalKeys)
+    // What a key with no transition of its own runs on: the Environment's Default transition
+    // (ADR-0051), read once too.
+    const defaultTransition = runtime.runSync(DefaultTransition.DefaultTransition)
+    // The Renderer every element projects and commits through (ADR-0003), read once too.
+    const renderer = runtime.runSync(Renderer.Renderer)
+    built = { gate, reducedMotion: applies, reducedMotionUnder: under, positionalKeys, defaultTransition, renderer }
+    return built
+  }
+  // What the `layout` Feature builds its projection system with (#511): reduced motion read as each
+  // 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)),
+  )
+  const features = clientRegistry(runtime)
+  // Its Instant changes (#443), timed by its Environment's Refresh frames, found at the first.
+  const instant = makeInstantAnimations(() => runtime.runSync(RefreshFrameSource.RefreshFrameSource).requestFrame)
+  const prepare = (): void => {
+    build()
+    warmInterpolators(runtime)
+  }
+  return {
+    runtime,
+    reducedMotionSetting,
+    instant,
+    features,
+    prepare,
+    get gate() {
+      return build().gate
+    },
+    get projection() {
+      return projectionIn(features.built())
+    },
+    get reducedMotion() {
+      return build().reducedMotion
+    },
+    get reducedMotionUnder() {
+      return build().reducedMotionUnder
+    },
+    get positionalKeys() {
+      return build().positionalKeys
+    },
+    get defaultTransition() {
+      return build().defaultTransition
+    },
+    get renderer() {
+      return build().renderer
+    },
+  }
+}
+
+/**
+ * Whether reduced motion applies now for an element under `config` (#434): its nearest
+ * `WardicConfig`'s setting, else the provider's; with no config above, the provider's reader as it is.
+ */
+export const reducedMotionWith = (value: WardicContextValue, config: WardicConfigValue | undefined): (() => boolean) => {
+  if (Predicate.isUndefined(config)) return value.reducedMotion
+  const under = value.reducedMotionUnder
+  return () => under(config.reducedMotion())
+}
+
+/**
+ * The reduced-motion setting that applies to an element under `config` (#443, Motion's
+ * `useReducedMotionConfig`): its nearest `WardicConfig`'s, else the provider's, else `"user"`.
+ */
+export const reducedMotionSettingWith = (value: WardicContextValue, config: WardicConfigValue | undefined): (() => ReducedMotion.Config) =>
+  () => settingOf(configSettingOf(config), value.reducedMotionSetting)
+
+/** A setting: the given one (a `WardicConfig`'s), else the provider's, else `"user"`. */
+const settingOf = (setting: ReducedMotion.Config | undefined, provider: () => ReducedMotion.Config | undefined): ReducedMotion.Config => {
+  if (Predicate.isNotUndefined(setting)) return setting
+  return Option.getOrElse(Option.fromUndefinedOr(provider()), () => "user" as const)
+}
+
+/**
+ * A server provider's context value (ADR-0021, decisions 1 and 3): an unbuilt runtime (`make`
+ * alone builds nothing, 0.92 µs, so code that grabs it at setup and uses it after mount keeps
+ * working), an inert gate, no projection system, reduced motion never applying, and the render's
+ * Appear animations when it has them.
+ */
+export const serverContext = (env: WardicEnv, appear: ServerAppear | undefined, reducedMotion: () => ReducedMotion.Config | undefined): WardicContextValue => {
+  const runtime = ManagedRuntime.make(env)
+  return {
+    runtime,
+    // A server render's elements take the lean path and never read it: read at each use if one does.
+    get renderer() {
+      return runtime.runSync(Renderer.Renderer)
+    },
+    features: serverRegistry(runtime),
+    prepare: constVoid,
+    gate: FlushGate.inert,
+    projection: undefined,
+    reducedMotion: () => false,
+    reducedMotionUnder: () => false,
+    reducedMotionSetting: reducedMotion,
+    positionalKeys: SERVER_POSITIONAL_KEYS,
+    defaultTransition: SERVER_DEFAULT_TRANSITION,
+    appear,
+    instant: NO_INSTANT,
+  }
+}
+
+/**
+ * Pairs nearly every app animates (#535): a number (opacity, the transform shorthands), a length and a
+ * colour. Resolving them runs the registry's selection, parsers and blends once, so a first animation
+ * after it runs them warm. Its cache is by the pair's own strings, so it's the code they warm.
+ */
+const WARM_PAIRS: ReadonlyArray<readonly [number | string, number | string]> = [
+  [0, 1],
+  ["0px", "10px"],
+  ["rgb(0, 0, 0)", "rgb(255, 255, 255)"],
+]
+
+/** Resolve {@link WARM_PAIRS} on `runtime`'s registry, and blend each once. */
+const warmInterpolators = (runtime: ProviderRuntime): void => {
+  const registry = runtime.runSync(InterpolatorRegistry.InterpolatorRegistry)
+  Arr.forEach(WARM_PAIRS, ([from, to]) => {
+    runtime.runSync(Effect.map(registry.resolve(from, to), (blend) => blend(0.5)))
+  })
+}
+
+/** How long a provider's {@link whenIdle} waits for an idle moment at most (#535), in ms. */
+const IDLE_TIMEOUT_MS = 250
+
+/** Where there's no `requestIdleCallback` (Safari), the timer it runs on instead (#535), in ms. */
+const IDLE_FALLBACK_MS = 50
+
+/**
+ * Run `fn` at the browser's idle time, within {@link IDLE_TIMEOUT_MS} (#535), or after
+ * {@link IDLE_FALLBACK_MS} where there's no `requestIdleCallback`. Returns its cancel.
+ */
+export const whenIdle = (fn: () => void): (() => void) => {
+  if (Predicate.isFunction(globalThis.requestIdleCallback)) {
+    const handle = globalThis.requestIdleCallback(fn, { timeout: IDLE_TIMEOUT_MS })
+    return () => globalThis.cancelIdleCallback(handle)
+  }
+  const handle = setTimeout(fn, IDLE_FALLBACK_MS)
+  return () => clearTimeout(handle)
+}
+
+/**
+ * What a provider builds at the browser's idle time once it has mounted (#535): `value`'s `prepare`,
+ * and `section`'s Features, its own. A failure here is left to the first element, whose own build
+ * fails the same way and reports it where it renders.
+ */
+export const prepareIdle = (value: WardicContextValue, section: FeatureSection): void => {
+  try {
+    value.prepare()
+    section.services()
+  } catch {
+    // Left to the first element's build, which reports it.
+  }
+}
+
+/** Reads `pick` off a provider's context value, or throws `name`'s clear error outside one. */
+export const fromContext = <A>(value: WardicContextValue | undefined, name: string, pick: (value: WardicContextValue) => A): A => {
+  if (Predicate.isUndefined(value)) throw new Error(`${name} must be used within a <WardicProvider>`)
+  return pick(value)
+}
+
+/** The projection system among `services`, the `layout` Feature's (#511), or `undefined` when they hold none. */
+export const projectionIn = (services: Context.Context<never>): ProjectionSystem.Shape | undefined =>
+  Option.getOrUndefined(Context.getOption(services as Context.Context<ProjectionSystem.ProjectionSystem>, ProjectionSystem.ProjectionSystem))
+
+/**
+ * `useAnimateLayout()`'s function: `animateLayout(fn, options?)` runs `fn` at once, animates the
+ * layout change it makes, and returns what `fn` returns. `options.onSettled` is called once every
+ * layout animation the change started has ended.
+ */
+// A Declared layout change (#4, ADR-0038); `onSettled` is #191's, ADR-0039.
+export type AnimateLayout = <A>(fn: () => A, options?: ProjectionSystem.AnimateLayoutOptions) => A
+
+const NO_OPTIONS: ProjectionSystem.AnimateLayoutOptions = {}
+
+/** During a server render nothing is measured: `fn` just runs, and with nothing to animate it has settled (ADR-0021). */
+const runOnly: AnimateLayout = (fn, options = NO_OPTIONS) => {
+  const result = fn()
+  UndefinedOr.map(options.onSettled, (onSettled) => onSettled())
+  return result
+}
+
+/**
+ * A provider's `animateLayout` (#4, ADR-0038), its projection system's read at each call (#511): `fn`
+ * just run until a section builds `layout`, as with no layout element there's nothing to animate, and
+ * during a server render.
+ */
+export const animateLayoutOf = (value: WardicContextValue | undefined): AnimateLayout =>
+  fromContext(
+    value,
+    "useAnimateLayout",
+    (v): AnimateLayout =>
+      (fn, options) =>
+        UndefinedOr.match(v.projection, { onUndefined: () => runOnly(fn, options), onDefined: (projection) => projection.animateLayout(fn, options) }),
+  )
+
+/**
+ * A fiber's effect as `runScoped` runs it: a failure logged at Error, `wardic.runScoped: a fiber
+ * failed`, with its cause, and reported to the Environment's `ErrorReporter`s (ADR-0030, decision
+ * 4); an interruption is neither. The fiber still fails with it.
+ */
+export const reported = <A, E>(effect: Effect.Effect<A, E, WardicServices>): Effect.Effect<A, E, WardicServices> =>
+  effect.pipe(Effect.tapCause((cause) => Report.failure("wardic.runScoped: a fiber failed", cause)))
+
+/** A fiber that has already ended by interruption, on no Wardic runtime (1.1 µs): what a server render starts. */
+export const interrupted = <A, E>(): Fiber.Fiber<A, E> => Effect.runFork(Effect.interrupt) as unknown as Fiber.Fiber<A, E>

package/src/sensors.ts

@@ -0,0 +1,189 @@
+/**
+ * Low-level sensor hooks (`createX`) — the thin Solid surface over core's
+ * recognizers and reactive service inputs (ADR-0006).
+ *
+ * Each boolean/sample sensor runs the matching core watch with `watchToSignal`
+ * (#318, #379): the recognizer's `wardic.*` span, and a Scope of its own with no
+ * fiber, closed on the consuming component's unmount (dropping the shared feed's
+ * count). `createReducedMotion` bridges
+ * `Probe.prefersReducedMotion` (an `Atom`) via {@link fromAtom}, `createReducedMotionConfig` lays the
+ * nearest config's setting over it, and `createPageInView` bridges `Probe.pageVisible` (#443). `createTransform` moved to
+ * `live-value.ts`, with `createSpring` (#130).
+ *
+ * All hooks MUST be called within a component/owner (they register `onCleanup`
+ * through the bridges and read the runtime from context).
+ */
+import * as Probe from "@wardic/core/Probe"
+import * as Recognizer from "@wardic/core/Recognizer"
+import * as ReducedMotion from "@wardic/core/ReducedMotion"
+import * as Bool from "effect/Boolean"
+import { constFalse } from "effect/Function"
+import * as Predicate from "effect/Predicate"
+import * as UndefinedOr from "effect/UndefinedOr"
+import { type Accessor, createComputed, createSignal, getOwner, runWithOwner, untrack } from "solid-js"
+import { fromAtom, watchToSignal } from "./bridge.ts"
+import type { WardicViewport } from "./config.ts"
+import { inViewOptionsOf } from "./gesture-callbacks.ts"
+import { useWardicReducedMotionSetting, useWardicRuntime } from "./provider.tsx"
+import { isServer } from "./server.ts"
+
+export type { CreateDragOptions } from "./drag-samples.ts"
+
+
+/** Whether an element's config wants each of its gesture recognizers (#87, #273). */
+export interface Wants<C> {
+  readonly hover: (config: C) => boolean
+  readonly press: (config: C) => boolean
+  readonly inView: (config: C) => boolean
+  readonly focus: (config: C) => boolean
+  readonly pan: (config: C) => boolean
+}
+
+/** Each gesture recognizer's start: the layers' state signals, and pan's watch (it sets no layer). */
+export interface Starts {
+  readonly hover: () => Accessor<boolean>
+  readonly press: () => Accessor<boolean>
+  readonly inView: () => Accessor<boolean>
+  readonly focus: () => Accessor<boolean>
+  readonly pan: () => void
+}
+
+/**
+ * The layer recognizers {@link createWhenWanted} has started: each its state's accessor, absent until
+ * it starts.
+ */
+export interface Started {
+  readonly hover?: Accessor<boolean> | undefined
+  readonly press?: Accessor<boolean> | undefined
+  readonly inView?: Accessor<boolean> | undefined
+  readonly focus?: Accessor<boolean> | undefined
+}
+
+const NONE_STARTED: Started = {}
+
+/** No layer recognizer started, for good: an element that can never want one (#525). */
+export const NEVER_STARTED: Accessor<Started> = () => NONE_STARTED
+
+/** A layer's state: its recognizer's, `false` until it starts. */
+export const stateOf = (started: Accessor<boolean> | undefined): boolean =>
+  UndefinedOr.match(started, { onUndefined: constFalse, onDefined: (state) => state() })
+
+/**
+ * An element's gesture recognizers, each started only once its config wants it (#87, ADR-0040;
+ * #273), and kept from then on. Motion's rule: its hover, tap, inView, focus and pan features attach
+ * only once their props are set. An element that never wants one starts no fiber and no
+ * subscription; one that stops wanting it keeps the recognizer, so a prop that toggles starts it
+ * once. A pointer already resting on the element when hover starts counts from its next entry, as
+ * Motion's does.
+ *
+ * One computation reads `config()` once a change for them all: a `wardic.*` element's config is
+ * rebuilt at each read. The layers' recognizers started are one signal, so a reader tracks it once,
+ * and then each started one's state ({@link stateOf}): Solid 1 tracks every read, the same signal's
+ * again included. Each start runs under the caller's owner, not this computation, so its recognizer
+ * lives and ends with the caller (its `onCleanup`), not with the next change.
+ */
+export const createWhenWanted = <C,>(config: Accessor<C>, wants: Wants<C>, starts: Starts): Accessor<Started> => {
+  const owner = getOwner()
+  const [started, setStarted] = createSignal<Started>(NONE_STARTED)
+  let panning = false
+  createComputed(() => {
+    const c = config()
+    const was = untrack(started)
+    let now = was
+    if (Predicate.isUndefined(was.hover)) {
+      if (wants.hover(c)) now = { ...now, hover: runWithOwner(owner, starts.hover) }
+    }
+    if (Predicate.isUndefined(was.press)) {
+      if (wants.press(c)) now = { ...now, press: runWithOwner(owner, starts.press) }
+    }
+    if (Predicate.isUndefined(was.inView)) {
+      if (wants.inView(c)) now = { ...now, inView: runWithOwner(owner, starts.inView) }
+    }
+    if (Predicate.isUndefined(was.focus)) {
+      if (wants.focus(c)) now = { ...now, focus: runWithOwner(owner, starts.focus) }
+    }
+    if (now !== was) setStarted(now)
+    if (Bool.not(panning)) {
+      if (wants.pan(c)) {
+        panning = true
+        runWithOwner(owner, starts.pan)
+      }
+    }
+  })
+  return started
+}
+
+/**
+ * `true` while `target` is in view, `false` otherwise. What "in view" means is a `viewport`'s, as on a
+ * Wardic element: `root`, a scrolling container (the window if none); `margin`, grown around it, as
+ * CSS `rootMargin`; `amount` of the element that must show, `"some"`, `"all"` or 0 to 1; and `once`,
+ * to stay `true` after the first entry. `false` until the first entry. `target` is the element itself,
+ * and `root` is read as it's called, so call it where both exist. Motion's `useInView`.
+ *
+ * @example
+ * const visible = createInView(props.card, { amount: "all", once: true })
+ * @see https://wardic.dev/reference/solid/gestures/create-in-view
+ */
+// The core in-view watch (#318), its options mapped as the element's `viewport` is (#273): `root` read
+// as it starts.
+export const createInView = (target: unknown, viewport?: WardicViewport): Accessor<boolean> =>
+  watchToSignal<boolean>(({ on, onDefect }) => Recognizer.watchInView(target, inViewOptionsOf(viewport), { on: (transition) => on(transition.active), onDefect }), false)
+
+/**
+ * Whether the visitor's system asks for reduced motion, as an accessor. A server renders `false`, and a
+ * hydrating page keeps it until it has mounted, so markup that depends on it hydrates. Wardic's
+ * animations honour the setting either way. Motion's `useReducedMotion`, which gives `null` on a server.
+ *
+ * @example
+ * const reduced = createReducedMotion()
+ * <Show when={!reduced()} fallback={<img src={still} />}><video autoplay src={clip} /></Show>
+ * @see https://wardic.dev/reference/solid/utilities/create-reduced-motion
+ */
+// The Probe's `prefersReducedMotion` Atom, held until mount (the Hydration hold, ADR-0021 decision 8).
+// The engine reads the preference as each animation starts, and snaps its positional keys (ADR-0029).
+export const createReducedMotion = (): Accessor<boolean> => {
+  // Before the provider is asked for: a server render needs none, as Solid 2's doesn't (#583).
+  if (isServer) return () => false
+  const runtime = useWardicRuntime()
+  // Resolve the Probe service once to read its reactive atom; a Context.Service
+  // key is itself an Effect, so running it yields the service instance.
+  const probe = runtime.runSync(Probe.Probe)
+  return fromAtom(probe.prefersReducedMotion, { serverValue: false })
+}
+
+/**
+ * Whether reduced motion applies here, as Wardic's animations here honour it: the nearest
+ * `WardicConfig`'s `reducedMotion`, else the provider's, over the visitor's setting. `"always"` is
+ * `true`, `"never"` `false`, and `"user"` follows the system. A server renders `"always"` as `true` and
+ * the rest as `false`, kept until the page has mounted. Motion's `useReducedMotionConfig`.
+ *
+ * @example
+ * const reduced = createReducedMotionConfig()
+ * const path = () => (reduced() ? undefined : arc())
+ * @see https://wardic.dev/reference/solid/utilities/create-reduced-motion
+ */
+// #443; tracked since #584.
+export const createReducedMotionConfig = (): Accessor<boolean> => {
+  const setting = useWardicReducedMotionSetting()
+  const prefers = createReducedMotion()
+  return () => ReducedMotion.applies(setting(), prefers())
+}
+
+/**
+ * Whether the page is shown: `false` while it's hidden, in a tab in the background or a minimised
+ * window. Pause what nobody can see, such as a carousel's autoplay. A server renders `true`, and a
+ * hydrating page keeps it until it has mounted. Motion's `usePageInView`.
+ *
+ * @example
+ * const visible = createPageInView()
+ * createEffect(() => (visible() ? player.play() : player.pause()))
+ * @see https://wardic.dev/reference/solid/gestures/create-page-in-view
+ */
+// #443, the Probe's `pageVisible`. The Hydration hold keeps `true` until mount, as Motion's starts
+// `true` and corrects itself after its first render.
+export const createPageInView = (): Accessor<boolean> => {
+  const runtime = useWardicRuntime()
+  if (isServer) return () => true
+  const probe = runtime.runSync(Probe.Probe)
+  return fromAtom(probe.pageVisible, { serverValue: true })
+}

package/src/server-interpolators.ts

@@ -0,0 +1,33 @@
+/**
+ * The DOM's Interpolators as a server render runs them: what its Appear animations sample and its
+ * `createTransform`s map with (a server projects with the DOM's `project`, ADR-0021 decision 2). Built
+ * from `DomInterpolators.layer` on first use, and kept: one while no colour spaces are registered, one
+ * after. The `colors` Feature registers its spaces for the whole process (`Color.registerSpaces`), and a
+ * registry keeps the blends it resolved by their strings, so one kept from before would blend `oklch()`
+ * as it's written for every render after (FS3, FV2). Registering is one way, so two are all it takes.
+ */
+// #618 (M6): each Appear element, each of its Blend legs and each server `createTransform` built the
+// Layer again: 4.7 µs a call, against 1.5 with one context (Bun).
+import type * as InterpolatorRegistry from "@wardic/core/InterpolatorRegistry"
+import * as Color from "@wardic/dom/Color"
+import * as DomInterpolators from "@wardic/dom/DomInterpolators"
+import type * as Context from "effect/Context"
+import * as Effect from "effect/Effect"
+import * as Layer from "effect/Layer"
+import * as Predicate from "effect/Predicate"
+
+// Module state (#460, Q7): a server's Interpolators, the same for every request, by whether the colour
+// spaces were registered when they were built. Nothing registers on them here; what they keep is a
+// bounded cache of blends by their strings, which is the same for every request in either state.
+const kept = new Map<boolean, Context.Context<InterpolatorRegistry.InterpolatorRegistry>>()
+
+/** `effect` with a server render's Interpolators, for the colour spaces registered now. */
+export const withServerInterpolators = <A, E>(effect: Effect.Effect<A, E, InterpolatorRegistry.InterpolatorRegistry>): Effect.Effect<A, E> => {
+  const registered = Color.spacesRegistered()
+  let context = kept.get(registered)
+  if (Predicate.isUndefined(context)) {
+    context = Effect.runSync(Effect.scoped(Layer.build(DomInterpolators.layer)))
+    kept.set(registered, context)
+  }
+  return Effect.provideContext(effect, context)
+}

package/src/server.ts

@@ -0,0 +1,21 @@
+/**
+ * Where the binding renders (ADR-0021, decision 3). The ONE server check in
+ * `@wardic/solid` is Solid's `isServer`: it says what Solid is doing (rendering to a
+ * string), not which globals exist, so a server that defines `window` (a jsdom test) is
+ * still a server. Internal, not a package export.
+ *
+ * A server render builds no runtime; a hydrating client renders what the server rendered
+ * until the element mounts (the **Hydration hold**, decision 8), then runs as a
+ * client-only render does.
+ */
+import { sharedConfig } from "solid-js"
+
+export { isServer } from "solid-js/web"
+
+/**
+ * Whether this setup runs inside a hydration of server-rendered markup: Solid 1.9 sets
+ * `sharedConfig.context` for the length of `hydrate()` (web/dist/web.js:357-366; its own
+ * `isHydrating` isn't exported). Read it at setup. Solid 2's flag differs (see
+ * docs/plans/upgrade-targets.md).
+ */
+export const isHydrating = (): boolean => sharedConfig.context != null

package/src/solid-reactivity.ts

@@ -0,0 +1,21 @@
+/**
+ * Solid 1's {@link Reactivity}, for the Solid-free modules the Solid 1 binding runs (#209).
+ *
+ * @module
+ */
+import { createComputed, createRoot, createSignal, on, untrack } from "solid-js"
+import type { Reactivity } from "./reactivity.ts"
+
+export const reactivity: Reactivity = {
+  untrack,
+  trigger: () => {
+    const [track, notify] = createSignal(undefined, { equals: false })
+    return { track, notify: () => notify() }
+  },
+  // A Solid 1 root isn't disposed with the owner it's made under.
+  watch: (accessor, onChange) =>
+    createRoot((dispose) => {
+      createComputed(on(accessor, onChange, { defer: true }))
+      return dispose
+    }),
+}