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

package/dist/server/unstable/v2/ward.js

@@ -0,0 +1,1653 @@
+var _m$ = Symbol(),
+  _m$2 = Symbol();
+var _d$ = {
+    get() {
+      const node = this[_m$];
+      return contextOf(node.provided);
+    },
+    enumerable: true,
+    configurable: true
+  },
+  _d$2 = {
+    get() {
+      const props = this[_m$2];
+      return props.children;
+    },
+    enumerable: true,
+    configurable: true
+  };
+function _P$(_p, _p2) {
+  this[_m$] = _p;
+  this[_m$2] = _p2;
+  Object.defineProperty(this, "value", _d$);
+  Object.defineProperty(this, "children", _d$2);
+}
+_P$.prototype = Object.prototype;
+var _d$3 = {
+    get() {
+      const appear = this[_m$];
+      return contextOf(appear.provided);
+    },
+    enumerable: true,
+    configurable: true
+  },
+  _d$4 = {
+    get() {
+      const props = this[_m$2];
+      return props.children;
+    },
+    enumerable: true,
+    configurable: true
+  };
+function _P$2(_p3, _p4) {
+  this[_m$] = _p3;
+  this[_m$2] = _p4;
+  Object.defineProperty(this, "value", _d$3);
+  Object.defineProperty(this, "children", _d$4);
+}
+_P$2.prototype = Object.prototype;
+import { tapPropagates } from "../../press.js";
+import * as Report from "@wardic/dom/Report";
+import * as Renderer from "@wardic/core/Renderer";
+import * as DomRenderer from "@wardic/dom/DomRenderer";
+import * as Style from "@wardic/dom/Style";
+import * as Svg from "@wardic/dom/Svg";
+import * as Arr from "effect/Array";
+import * as Bool from "effect/Boolean";
+import * as Cause from "effect/Cause";
+import * as Effect from "effect/Effect";
+import * as Scope from "effect/Scope";
+import { constFalse, constTrue, constUndefined, constVoid, identity, pipe } from "effect/Function";
+import * as Option from "effect/Option";
+import * as Predicate from "effect/Predicate";
+import * as UndefinedOr from "effect/UndefinedOr";
+import { Atom } from "effect/reactivity";
+import { isServer, useHead } from "@solidjs/web";
+import { createEffect, createMemo, createSignal, createUniqueId, DEV, getOwner, isHydrating, onCleanup, runWithOwner, untrack } from "solid-js";
+import { MOTION_PROPS_V2 } from "../../motion-props.js";
+import * as OwnerScope from "../../owner-scope.js";
+import { GESTURE_WORDS, serviceIn } from "../../gesture-features.js";
+import { inViewOptionsOf } from "../../gesture-callbacks.js";
+import { projectionIn } from "../../runtime.js";
+import { createElementStyle } from "../../element-style.js";
+import { createLiveStyle, readLive, serverRegistryOf, split } from "../../live-style.js";
+import { dragTransitionOf } from "../../drag-transition.js";
+import { layoutOptionsOf, registrationOf, wantsLayoutNode } from "../../layout-member.js";
+import { useLayoutGroupId } from "./layout.js";
+import { registerAnimatable } from "../../imperative.js";
+import { controlledConfigOf, controlledElement, isAnimationControls, subscribe, uncontrolledOf } from "../../animation-controls.js";
+import { settingOf } from "../../wardic-config-value.js";
+import { presenceBlocksInitial, presenceHold, presenceSeedOf } from "../../presence-record.js";
+import { handoffOf, setsAnimation } from "../../appear.js";
+import { appearEntryOf, applyDragDefaults, dragAxisOf, dragDefaultsOf, draggingWithWillChange, drawnAtRest, followTemplate, heldTransformFor, registeredValuesOf, flagStartingStyle, isLayoutNode, makeElementSpine, makeReuse, exitConfigOf, exitTargetOf, presenceTreeOf, NO_EXIT_CONFIG, madeWith, presenceRecordOf, recordFrameOf, registryOf, releasingAppear, resolutionOf, restingOf, sameResolution, serverStartingStyle, snapshotOf, startLinksOf, startOf, warnDroppedTransform, withOnUpdate } from "../../spine.js";
+import { inheritedContext, serverVariantNode, startsAtAnimate, startsQuiet } from "../../variant-tree.js";
+import { followAtom } from "./bridge.js";
+import { appearStyle, useWardicAppear, useWardicGate, useWardicPositionalKeys, useWardicDefaultTransition, useBuiltProjection, useWardicReducedMotion, useWardicRenderer, useWardicRuntime, useWardicSkipAnimations, useElementFeatures, useFeatureRegistry } from "./provider.js";
+import { LAYOUT_PROPS, missingMessage, unreadColorIn } from "../../feature.js";
+import { CLIENT_ONLY, CLIENT_ONLY_DEFERRED, CLIENT_ONLY_SYNC, CLIENT_ONLY_SYNC_DEFERRED, reactivityIn } from "./solid-reactivity.js";
+import { useWardicConfig } from "./wardic-config.js";
+import { pointMapOptionOf, transformPagePointOf } from "../../wardic-config-value.js";
+import { configView } from "./config-view.js";
+import { Lifecycle } from "./lifecycle.js";
+import { neverLands, NO_EVENTS, serverWhen } from "./waiters.js";
+import { usePresenceContext } from "./presence.js";
+import { createVariantNode, useVariantContext, WardicVariantContext } from "./variant-node.js";
+import { DragGesture, FocusGesture, HoverGesture, InViewGesture, PanGesture, PressGesture } from "../../features/keys.js";
+/** Every key a ward reads, its callbacks among them. */
+const WARD_KEYS = ["initial", "animate", "variants", "custom", "inherit", "whileHover", "whileTap", "whileInView", "whileFocus", "viewport", "drag", "whileDrag", "dragConstraints", "dragElastic", "dragMomentum", "dragSnapToOrigin", "dragTransition", "dragPropagation", "propagate", "dragDirectionLock", "dragControls", "dragListener", "onMeasureDragConstraints", "transition", "exit", "layout", "layoutDependency", "layoutId", "layoutScroll", "layoutRoot", "layoutAnchor", "layoutCrossfade", "onUpdate", "transformTemplate", "onBeforeLayoutMeasure", "onLayoutMeasure", "appear", "style", "key"];
+const everyKeyRead = true;
+void everyKeyRead;
+const everyPropRead = true;
+void everyPropRead;
+/**
+ * The target memo's comparison (#337): {@link sameResolution}, and a change when there's nothing to
+ * compare with. Solid 2 calls a memo's `equals` with no previous value when the memo was made inside
+ * an action's transaction, as a ward an optimistic write makes is, before anything has committed.
+ */
+const sameTarget = (a, b) => {
+  if (Predicate.isUndefined(a)) return false;
+  if (Predicate.isUndefined(b)) return false;
+  return sameResolution(a, b);
+};
+/** A ward's config read per key (#259). */
+const WARD_VIEW = configView(WARD_KEYS, ["onUpdate", "dragConstraints", "onMeasureDragConstraints", "transformTemplate", "onBeforeLayoutMeasure", "onLayoutMeasure"]);
+/** `config` read per key (#259), for a read outside a ward: a `wardic.<tag>`'s props at setup. Internal. */
+export const wardConfigView = config => WARD_VIEW.of(config);
+/** A config given whole as an accessor, which the Solid 2 binding no longer reads (#259). */
+const WHOLE_ACCESSOR = "ward(config) takes its config as an object, read per key (#259): make a key reactive with an accessor " + "(`ward({ animate: () => ({ x: x() }) })`), a getter, a store or a component's props, not the whole config " + "(`ward(() => ({ … }))`).";
+/**
+ * A ward's mark (#349): what tells a ward given to a component's `wardRef` from a function handed the
+ * component's own ward. Internal: its value is the ward's {@link WardShare}.
+ */
+export const WARD = Symbol("wardic.ward");
+/** Where a ward keeps its {@link WardState}: on itself, not enumerable, so a spread never sees it. */
+const WARD_STATE = Symbol("wardic.wardState");
+/** A ward's {@link WardState}. */
+const stateOf = ward => ward[WARD_STATE];
+/**
+ * The members every client ward shares (#525): one prototype over `Function.prototype`, so a ward is
+ * still a function, Solid's ref. Each is a getter: its closure is made at its first read and kept on
+ * that ward, so one taken off the ward still works and one never read is never made. A ward was
+ * given each as its own property, a descriptor and most a closure apiece, in one `defineProperties` a
+ * ward: the line a Solid 2 mount spent most in. A ward keeps `ref`, `style` and its attributes as its
+ * own, enumerable, as a spread and `Object.keys` read them.
+ */
+const WARD_MEMBER_KEYS = {
+  [WARD]: {
+    get() {
+      return stateOf(this).shared();
+    }
+  },
+  Provider: {
+    get() {
+      return stateOf(this).Provider;
+    }
+  },
+  read: {
+    get() {
+      return stateOf(this).read;
+    }
+  },
+  atom: {
+    get() {
+      return stateOf(this).atom;
+    }
+  },
+  with: {
+    get() {
+      return stateOf(this).with;
+    }
+  },
+  settled: {
+    get() {
+      const state = stateOf(this);
+      if (Predicate.isNotUndefined(state.settled)) return state.settled;
+      const lifecycle = state.lifecycle;
+      state.settled = () => lifecycle.read();
+      return state.settled;
+    }
+  },
+  tapped: {
+    get() {
+      const state = stateOf(this);
+      if (Predicate.isNotUndefined(state.tapped)) return state.tapped;
+      const lifecycle = state.lifecycle;
+      state.tapped = () => lifecycle.tapped();
+      return state.tapped;
+    }
+  },
+  next: {
+    get() {
+      const state = stateOf(this);
+      if (Predicate.isNotUndefined(state.next)) return state.next;
+      const lifecycle = state.lifecycle;
+      const next = name => lifecycle.wait(name);
+      state.next = next;
+      return next;
+    }
+  },
+  each: {
+    get() {
+      const state = stateOf(this);
+      if (Predicate.isNotUndefined(state.each)) return state.each;
+      const lifecycle = state.lifecycle;
+      const each = name => lifecycle.each(name);
+      state.each = each;
+      return each;
+    }
+  },
+  when: {
+    get() {
+      const state = stateOf(this);
+      if (Predicate.isNotUndefined(state.when)) return state.when;
+      const lifecycle = state.lifecycle;
+      const when = name => lifecycle.when(name);
+      state.when = when;
+      return when;
+    }
+  }
+};
+/** {@link WARD_MEMBER_KEYS} on one prototype over `Function.prototype`. */
+const WARD_MEMBERS = /*#__PURE__*/Object.create(Function.prototype, WARD_MEMBER_KEYS);
+/** What a `wardic.*` component or a `<Reorder>` item adds to a ward. Internal. */
+/**
+ * The config keys that want a gesture on Solid 2 (#525), as the ward's `wants*` read them: an element
+ * given none, its keys fixed, is `gestureless`. Pan is wanted only through the lifecycle.
+ */
+export const GESTURE_KEYS = ["whileHover", "whileTap", "whileInView", "whileFocus"];
+/** A ward's share, or `undefined` for anything else (a function handed a component's own ward). */
+export const shareOf = value => {
+  if (Bool.not(Predicate.hasProperty(value, WARD))) return undefined;
+  return value[WARD];
+};
+/** A ward driving an element while another is: a ward drives one element at a time (#349's Q5). */
+const secondElement = name => `${name}: this ward is already on another element. A ward drives one element at a time: make one for each element, ` + "in the <For> callback or a component of its own, rather than giving or spreading the same one twice.";
+/** Whether `other` is an element other than `el` still on the page (#349's Q5). */
+const stillOn = (other, el) => {
+  if (Predicate.isUndefined(other)) return false;
+  return Bool.and(other !== el, other.isConnected);
+};
+/** What a ward's errors call it: the component it drives an element for, else `ward(config)`. */
+const nameOf = internal => UndefinedOr.match(internal.name, {
+  onUndefined: () => "ward(config)",
+  onDefined: identity
+});
+/** What a Slim element tells its ward: it brings no Feature of its own (#511). */
+export const SLIM = {};
+/** A ward's internals from `ward()`'s options: its chosen parent, if any. */
+export const internalsOf = (options, kind) => {
+  if (Predicate.isUndefined(options)) return kind;
+  if (Predicate.isUndefined(options.parent)) return kind;
+  return {
+    ...kind,
+    parent: options.parent
+  };
+};
+const NO_GESTURES = {
+  element: undefined,
+  inView: false,
+  focused: false,
+  hovered: false,
+  pressed: false,
+  dragging: false
+};
+/** Whether a ward's call is Solid applying it as a ref. */
+const isElement = value => Predicate.hasProperty(value, "nodeType");
+/** A context value as Solid 2's context takes it: `null` for none. */
+const contextOf = value => Option.getOrNull(Option.fromUndefinedOr(value));
+/**
+ * Says, once per provider, that a colour of the element's needs the `colors` Feature (#511, ADR-0067
+ * decision 7): a value naming a wide-gamut space, while the page reads none, outside a lazy load.
+ * Development only (its caller's `DEV`).
+ */
+const warnUnreadColors = (registry, features, values) => {
+  createEffect(() => {
+    if (features.pending()) return undefined;
+    return unreadColorIn(values());
+  }, unread => {
+    if (Predicate.isUndefined(unread)) return;
+    registry.warnOnce("colors", missingMessage("colors", `The colour \`${unread}\``, "@wardic/solid/unstable/v2"));
+  }, CLIENT_ONLY);
+};
+/** Whether a config carries its variants (#398): it sets `variants` or `inherit`. */
+const carriesVariants = config => Bool.or(Predicate.isNotUndefined(config.variants), Predicate.isNotUndefined(config.inherit));
+/** A child made with `{ parent }` naming a Listening ward (#398's Q10). */
+const LISTENING_PARENT = "ward(config, { parent }): the parent given carries no variants (no `variants` or `inherit` in its ward({ … })): it only listens, " + "and its element's props hold its variants, so a child can't join it by `{ parent }` (#398). Render the child inside that " + "ward's element, where it joins through the tree, or put the variants in the parent's ward({ … }).";
+/**
+ * The **Layout group** a ward's `layoutId` goes in (#432): the one it's made in, as its presence and
+ * variant parent are; a driving ward's is its given ward's, where that was made, unless the element's
+ * own props set the `layoutId` (#398), which is then the element's.
+ */
+const layoutGroupFor = (share, fixed) => {
+  if (Predicate.isUndefined(share)) return useLayoutGroupId();
+  if (Bool.and(Predicate.isNotUndefined(fixed), Predicate.hasProperty(fixed, "layoutId"))) return useLayoutGroupId();
+  return share.layoutGroup;
+};
+/**
+ * The variant context a ward is made under (#349): a driving ward's given ward's, else its given
+ * parent's, else the one around it. A driving ward for a Listening ward (#398) takes the one around
+ * its element instead, unless the ward's parent was chosen: its element builds its own node there.
+ */
+const variantParentOf = internal => {
+  const share = internal.share;
+  if (Predicate.isNotUndefined(share)) {
+    if (Bool.or(share.carries, share.chosen)) return share.parent;
+    return useVariantContext();
+  }
+  const parent = shareOf(internal.parent);
+  if (Predicate.isNotUndefined(parent)) {
+    if (Bool.not(parent.carries)) throw new Error(LISTENING_PARENT);
+    return parent.provided;
+  }
+  return useVariantContext();
+};
+/**
+ * A ward's variant node: a driving ward's is its given ward's (#349), unless that ward listens
+ * (#398), when its element builds its own from its props; any other ward's is its own, made now.
+ */
+const nodeFor = (share, cfg, config, parent, change) => {
+  if (Predicate.isNotUndefined(share)) {
+    const node = share.node;
+    if (Predicate.isNotUndefined(node)) {
+      if (share.carries) return node;
+    }
+  }
+  return createVariantNode(cfg, config, parent, change);
+};
+/** No change: a ward without Animation controls. */
+const NO_CHANGE = constUndefined;
+/**
+ * A ward's config with its `animate` read once, at setup (#433): **Animation controls** make each change
+ * they make its entry, over the rest of its keys as given, the view marked controlled; anything else, none.
+ */
+const controlsOf = (given, animate) => {
+  if (Bool.not(isAnimationControls(animate))) return undefined;
+  const [change, setChange] = createSignal(undefined);
+  const view = Object.create(given, {
+    animate: {
+      enumerable: true,
+      get: () => UndefinedOr.map(change(), made => made.definition)
+    },
+    controlled: {
+      enumerable: true,
+      value: true
+    }
+  });
+  return {
+    controls: animate,
+    view,
+    change,
+    set: made => setChange(() => made)
+  };
+};
+/**
+ * `view` with its **Config transition** as its own when it gives none (#434, Motion's
+ * `{ ...config, ...props }`), read per read as its keys are; `view` itself with no `WardicConfig` above.
+ */
+const configuredView = (view, config) => {
+  if (Predicate.isUndefined(config)) return view;
+  return Object.create(view, {
+    transition: {
+      enumerable: true,
+      get: () => UndefinedOr.match(view.transition, {
+        onUndefined: config.transition,
+        onDefined: identity
+      })
+    }
+  });
+};
+/**
+ * Whether a node's `when` gate lets a Retarget start (ADR-0007), as a memo, so only a flip of it
+ * re-runs what reads it. A plain node's gate never shuts (its `canStart` is `constTrue`), so it has
+ * none (#525).
+ */
+const gateOf = node => {
+  if (node.canStart === constTrue) return constTrue;
+  return createMemo(() => node.canStart(), CLIENT_ONLY);
+};
+/** A ward's lifecycle: a driving ward's is its given ward's (#349), any other its own, made now. */
+const lifecycleFor = (share, owner, want) => {
+  const shared = UndefinedOr.map(share, lifecycleOfShare);
+  if (Predicate.isNotUndefined(shared)) return shared;
+  return new Lifecycle(owner, want);
+};
+const lifecycleOfShare = share => share.lifecycle;
+/** A mount's element. */
+const elementOfMount = m => m.element;
+/**
+ * A ward mounting an element another ward left in the same task: a spread's expression
+ * (`{...ward(config)}`), which Solid 2 runs again on every run of the element's props, making a new
+ * ward each time.
+ */
+const REMADE = "ward(config) made a new ward for an element another ward just left: Solid 2 runs a spread's expression " + "(`<div {...ward(config)} />`) again on every run of the element's props. Make it once, in the component's body, " + "and spread that: `const card = ward(config)` then `<div {...card} />`. Or give it to `ref={ward(config)}`, client-only.";
+/**
+ * The keys a ward reads as it goes, through its target or its style (#257 item 1): one still loading
+ * when the ward is made holds its region until it lands. Any other key is fixed at setup.
+ */
+const LOADS_AS_IT_GOES = new Set(["animate", "whileHover", "whileTap", "whileFocus", "whileInView", "whileDrag", "transition", "style", "custom"]);
+/** A ward's setup key still loading when it's made (#257 item 1). */
+const loadingAtSetup = key => `ward(config): \`${key}\` was still loading when the ward was made. A ward reads it once, when it's made: give it a value, or make the ward once its data is in.`;
+/** A ward that starts at its `animate`, still loading when it's made (#257 item 1). */
+const STARTS_AT_PENDING = "ward(config): `animate` was still loading when the ward was made, and with `initial={false}` a ward starts there. Give it an `initial`, or make the ward once its data is in.";
+/** A name list standing for an `animate` still loading at setup, on a ward with `variants` (#257 item 1). */
+const LOADING_NAMES = [];
+/**
+ * The config setup reads: a key still loading that setup fixes is an error (#257 item 1). A loading
+ * `animate` names the ward's own variants when it has `variants` (what it can name), and is a target
+ * of values otherwise: setup reads it only to tell which.
+ */
+const configAtSetup = setup => {
+  if (setup.pending.length === 0) return setup.config;
+  const fixed = Arr.findFirst(setup.pending, key => Bool.not(LOADS_AS_IT_GOES.has(key)));
+  if (Option.isSome(fixed)) throw new Error(loadingAtSetup(fixed.value));
+  const config = setup.config;
+  if (Bool.and(Arr.contains(setup.pending, "animate"), Predicate.isNotUndefined(config.variants))) return {
+    ...config,
+    animate: LOADING_NAMES
+  };
+  return config;
+};
+/**
+ * Elements a ward has left in this task: a ward mounting one is {@link REMADE}. Cleared once, at the
+ * task's end, by one microtask however many leave (#259: one a ward cost 0.2 ms an unmount of 1,000).
+ */
+// Module state (#460, Q7): the page's one end-of-task batch: cleared by one microtask at the task's end.
+const justLeft = new Set();
+const forgetJustLeft = () => justLeft.clear();
+/** {@link ward} with a `wardic.<tag>`'s additions. Internal. */
+/**
+ * Makes a mounted element's layout node with `arrive` if it was on its way as the element mounted and
+ * `services` has `layout` now (#582). A module's function, not a ward's: a ward makes none.
+ */
+const layoutArrivedIn = (arrive, services) => {
+  UndefinedOr.map(arrive, make => UndefinedOr.map(projectionIn(services), make));
+};
+export function wardWith(config, internal) {
+  if (Predicate.isFunction(config)) throw new Error(WHOLE_ACCESSOR);
+  const runtime = useWardicRuntime();
+  // Its Features (#511, ADR-0067), a Complete element's every one: what they register, a server
+  // render's elements read too (the `colors` Feature's spaces).
+  const features = useElementFeatures(internal.brings, internal.complete === true);
+  // A server render takes the lean path: the Starting style only, no spine (ADR-0021).
+  if (isServer) return serverWard(config, internal);
+  const gate = useWardicGate();
+  // Its section's projection system, the `layout` Feature's (#511): `undefined` without it. Read now,
+  // which builds the Features given to its section at once: the first element to ask builds them.
+  const layoutProjection = projectionIn(untrack(features.services));
+  // The provider's, once any section has built it: what its values register with.
+  const builtProjection = useBuiltProjection();
+  const reducedMotion = useWardicReducedMotion();
+  // Whether its animations are skipped (#468): its nearest WardicConfig's, read as each starts.
+  const skipAnimations = useWardicSkipAnimations();
+  // Where its drag's and pan's points are (#443): its nearest WardicConfig's, read as each starts.
+  const pagePoint = transformPagePointOf(useWardicConfig());
+  const positionalKeys = useWardicPositionalKeys();
+  const defaultTransition = useWardicDefaultTransition();
+  const owner = getOwner();
+  const reactivity = reactivityIn(owner);
+  const registry = registryOf(runtime);
+  // SSR/hydration-stable: the server ward makes the same one call.
+  const id = createUniqueId();
+  // Its config, read per key where it's read (#259): a change re-runs only what reads the key. With
+  // Animation controls for its `animate` (#433), read once, each change they make is its entry.
+  // Under a `WardicConfig`, its Config transition is its own when it gives none (#434).
+  const asGiven = configuredView(WARD_VIEW.of(config, internal.fixed), useWardicConfig());
+  // The config at setup, a plain copy read untracked: what setup reads, the keys read once among it.
+  // A key still loading (#257 item 1) is left out of it: one the ward reads as it goes holds its
+  // region until it lands; one setup fixes is an error, naming it. Its `animate` there tells
+  // Animation controls; one still loading is none.
+  const givenSetup = WARD_VIEW.setupOf(asGiven);
+  const controls = controlsOf(asGiven, givenSetup.config.animate);
+  const view = UndefinedOr.match(controls, {
+    onUndefined: () => asGiven,
+    onDefined: c => c.view
+  });
+  const cfg = () => view;
+  const setup = UndefinedOr.match(controls, {
+    onUndefined: () => givenSetup,
+    onDefined: () => WARD_VIEW.setupOf(view)
+  });
+  const initialConfig = UndefinedOr.match(controls, {
+    onUndefined: () => configAtSetup(setup),
+    onDefined: () => controlledConfigOf(configAtSetup(setup), undefined)
+  });
+  // Its Animation controls' change (#433), read with the Override stack: none without them.
+  const ownChange = UndefinedOr.match(controls, {
+    onUndefined: () => NO_CHANGE,
+    onDefined: c => c.change
+  });
+  // A ward a component was given (#349), whose element this one drives: its variant node and its
+  // lifecycle are that ward's, so its children, stagger and `next` readers are where it was made.
+  const share = internal.share;
+  // Its place in variant orchestration (ADR-0007, #50): where it's made, its given parent's (#349),
+  // or its given ward's.
+  const parent = variantParentOf(internal);
+  const node = nodeFor(share, cfg, initialConfig, parent, UndefinedOr.map(controls, c => c.change));
+  // The nearest <AnimatePresence> (ADR-0007), or none.
+  const presence = usePresenceContext();
+  // The Layout group its `layoutId` goes in (#432): where it's made, or a given ward's.
+  const layoutGroup = layoutGroupFor(share, internal.fixed);
+  // The values it starts from, read once (ADR-0003): its `initial`, or the one it inherits, or its
+  // `animate` with `initial={false}` (its own, inherited, or its presence's first render, #134).
+  const presenceBlocks = presenceBlocksInitial(presence);
+  if (Bool.and(Arr.contains(setup.pending, "animate"), startsAtAnimate(initialConfig, node.inherited, presenceBlocks))) throw new Error(STARTS_AT_PENDING);
+  const start = startOf(initialConfig, node.inherited, presenceBlocks, untrack);
+  // Read once by the provider (#618, M1).
+  const {
+    project
+  } = useWardicRenderer();
+  // The Starting style: the projected `initial`, carried by `style` until the gate's first commit
+  // (ADR-0021 decision 6, ADR-0034); an svg-inner tag's attribute keys as attributes. While
+  // hydrating, what the server rendered, the DOM's project (the Hydration hold). A layout node's is
+  // drawn through its projection at rest, as its first commit draws it (#245).
+  const layoutNode = isLayoutNode(initialConfig);
+  const drawnStart = drawnAtRest(start.initialValues, layoutNode, initialConfig.transformTemplate);
+  const projected = project(drawnStart);
+  const hydrating = isHydrating();
+  const startingPatch = Bool.match(hydrating, {
+    onTrue: () => DomRenderer.project(drawnStart),
+    onFalse: () => projected
+  });
+  if (hydrating) flagStartingStyle(runtime, id, startingPatch, projected);
+  const seed = Svg.splitPatchForTag(internal.tag, startingPatch);
+  // Its drag axis and a drag element's defaults (ADR-0004, ADR-0019 *Amendment (Reorder)*), under
+  // the user's style: `drag` is read once, as on the Solid 1 binding.
+  const dragAxis = dragAxisOf(initialConfig, internal);
+  const dragDefaults = dragDefaultsOf(initialConfig, internal);
+  // Its routed `style` keys (#130, ADR-0043), and its `style`, switched by the gate's hooks.
+  const live = createLiveStyle({
+    registry: registryOf(runtime),
+    onDroppedTransform: () => warnDroppedTransform(runtime, id),
+    reactivity
+  });
+  const projectStarting = Bool.match(hydrating, {
+    onTrue: () => DomRenderer.project,
+    onFalse: () => project
+  });
+  // The element's style (#264): the config's, with the latest `.with()` style over it, key by key.
+  // `.with()` runs in the spread's computation, an owned scope: it tells `read(key)` through a
+  // signal written there (`ownedWrite`), and never `style`, whose spread would run `.with` again.
+  let given = NO_WITH;
+  // Made at the first `read(key)` or `.with()`: most elements call neither.
+  let withCalls;
+  const withCallsOf = () => {
+    if (Predicate.isUndefined(withCalls)) withCalls = runWithOwner(owner, () => createSignal(undefined, {
+      equals: false,
+      ownedWrite: true
+    }));
+    return withCalls;
+  };
+  const userStyle = () => withStyleOver(cfg().style, given.style);
+  const elementStyle = createElementStyle({
+    userStyle,
+    starting: seed.style,
+    startingWith: routed => Svg.splitPatchForTag(internal.tag, projectStarting(drawnAtRest({
+      ...routed,
+      ...start.initialValues
+    }, layoutNode, initialConfig.transformTemplate))).style,
+    live,
+    defaults: dragDefaults,
+    base: internal.baseStyle,
+    reactivity
+  });
+  const snapshot = snapshotOf(start);
+  const reuse = makeReuse();
+  // Where its element starts (#414): the ward's start, or a fresh one for an element given after the
+  // last one left the page, as a mount after the first render's (no presence holds its `initial`
+  // back). Its Snapshot goes back to it, and its Starting style comes back on until its first commit.
+  let begun = start;
+  const beginFresh = () => {
+    // The config now, a plain copy read untracked, as setup reads it: this runs in the mount effect.
+    const now = WARD_VIEW.setupOf(view).config;
+    begun = startOf(now, node.inherited, false, untrack);
+    snapshot.values = {
+      ...begun.initialValues
+    };
+    snapshot.velocities = {};
+    snapshot.drawnAt = {};
+    elementStyle.restart(Svg.splitPatchForTag(internal.tag, project(drawnAtRest(begun.initialValues, layoutNode, now.transformTemplate))).style);
+  };
+  const configNow = () => view;
+  const styleNow = () => untrack(userStyle);
+  // What its exit resolves from under an <AnimatePresence> (#277: its `exit`, `variants`, `custom` and
+  // transition), kept current while it's alive: the presence resolves it as the ward leaves (ADR-0007).
+  const exitConfig = {
+    current: NO_EXIT_CONFIG
+  };
+  if (Predicate.isNotUndefined(presence)) {
+    // Its inherited transition is read untracked here: the effect keeps it current.
+    exitConfig.current = untrack(() => exitConfigOf(initialConfig, node.inherited));
+    createEffect(() => exitConfigOf(cfg(), node.inherited), config => {
+      exitConfig.current = config;
+    }, CLIENT_ONLY_DEFERRED);
+  }
+  // Its layout node (ADR-0009): the projection system it registers one with, decided at setup, as
+  // `layout` is read once, and what a release runs on, its Release offset (ADR-0016, *Amendment
+  // (#140)*). Its section's `layout` makes its node (#511): without it, its layout props do nothing,
+  // and development says so once, unless `layout` is on its way.
+  const wantsNode = wantsLayoutNode(initialConfig);
+  if (DEV && wantsNode && Predicate.isUndefined(layoutProjection) && Bool.not(untrack(features.pending))) {
+    useFeatureRegistry().warnOnce("layout", missingMessage("layout", LAYOUT_PROPS, "@wardic/solid/unstable/v2"));
+  }
+  const layoutNodes = Bool.match(wantsNode, {
+    onTrue: () => layoutProjection,
+    onFalse: constUndefined
+  });
+  const dragTransition = dragTransitionOf(initialConfig.dragElastic, initialConfig.dragTransition);
+  // The element, set by the ref during render. Its write is the one a ward makes in an owned scope: a
+  // ward called with its element in a component's body (WT2), not given to `ref`.
+  const [element, setElement] = createSignal(undefined, {
+    ownedWrite: true
+  });
+  // Its gesture layers' states (ADR-0005), one signal for the three, so the target reads one (#259),
+  // each recorded on its element: the hover and press recognizers, each started on its element the
+  // first time its `while*` target is set (#87, ADR-0040), and the drag's. A write that changes
+  // nothing keeps the same object.
+  const [gestureState, setGestureState] = createSignal(NO_GESTURES);
+  /** Set `layer` on `el`: a state recorded on another element starts again from none. */
+  const setGesture = (el, layer, on) => {
+    setGestureState(g => {
+      if (g.element !== el) return Bool.match(on, {
+        onTrue: () => ({
+          ...NO_GESTURES,
+          element: el,
+          [layer]: true
+        }),
+        onFalse: () => g
+      });
+      if (g[layer] === on) return g;
+      return {
+        ...g,
+        [layer]: on
+      };
+    });
+  };
+  // The layers on the element mounted now: a state recorded on one the ward has left reads as none, so
+  // a move resets nothing by writing (#257's audit: the reset, written in the mount's effect, fed the
+  // target memo and re-ran the effect, EFFECT_WRITES_OWN_SOURCE). With none recorded there's nothing
+  // to compare, so the element isn't read: its arrival doesn't re-run the target memo (#320).
+  const gestures = () => {
+    const g = gestureState();
+    if (g === NO_GESTURES) return g;
+    if (g.element === element()) return g;
+    return NO_GESTURES;
+  };
+  const dragging = () => gestures().dragging;
+  // The keys these read are `GESTURE_KEYS` (#525).
+  const wantsHover = () => Predicate.isNotUndefined(cfg().whileHover);
+  const wantsPress = () => Predicate.isNotUndefined(cfg().whileTap);
+  const wantsInView = () => Predicate.isNotUndefined(cfg().whileInView);
+  const wantsFocus = () => Predicate.isNotUndefined(cfg().whileFocus);
+  // The Override stack, compared by value: a change that resolves the same target doesn't Retarget.
+  // A keyboard lift turns `whileDrag` on, as a drag does (ADR-0037).
+  const lifted = UndefinedOr.match(internal.lifted, {
+    onUndefined: () => constFalse,
+    onDefined: identity
+  });
+  const target = createMemo(() => {
+    const g = gestures();
+    return resolutionOf(cfg(), node.inherited, start.initialLink, {
+      inView: g.inView,
+      focused: g.focused,
+      hovered: g.hovered,
+      pressed: g.pressed,
+      dragged: Bool.or(g.dragging, lifted()),
+      dragging: g.dragging
+    }, snapshot, ownChange());
+  }, {
+    equals: sameTarget,
+    transparent: true
+  });
+  // A colour only the `colors` Feature reads, on a Slim element without it (#511, decision 7): said
+  // once per provider, in development only, and not while a lazy load is on its way.
+  // eslint-disable-next-line solid/reactivity -- read inside the warning's effect, where it tracks
+  if (DEV && internal.complete !== true) warnUnreadColors(useFeatureRegistry(), features, () => target().resolved);
+  // Its gesture states, for what its variant node hands down (#291): bound at setup, before its
+  // children read them. Read from the gestures themselves, not the target: a gesture whose layer
+  // resolves to nothing new leaves the target as it was (`sameResolution`), but is on all the same.
+  // Only a provider has one: a guard, so other wards make nothing here.
+  const bindGestures = node.bindGestures;
+  if (Predicate.isNotUndefined(bindGestures)) {
+    // eslint-disable-next-line solid/reactivity -- read inside the variant node's gestures memo, where it tracks
+    bindGestures(() => {
+      const g = gestures();
+      return {
+        inView: g.inView,
+        focused: g.focused,
+        hovered: g.hovered,
+        pressed: g.pressed,
+        dragged: Bool.or(g.dragging, lifted())
+      };
+    });
+  }
+  // Its Retargets' starts and landings (#257, ADR-0046): `settled()` and `next("settled")`, each with
+  // the gesture layers its target was resolved with.
+  // A gesture's event asked for starts its recognizer on the mounted element (and on later mounts).
+  // The ward driving an element for this one, given to a component (#349): its `read`, `atom` and
+  // `next` follow that element. Followed through an Atom made at the first `read`, `atom` or drive.
+  let driver;
+  let driven;
+  const drivenAtom = () => {
+    if (Predicate.isNotUndefined(driven)) return driven;
+    const atom = Atom.make(driver);
+    runWithOwner(owner, () => onCleanup(registry().mount(atom)));
+    driven = atom;
+    return atom;
+  };
+  // A driving ward's are its given ward's (#349), whose `next` starts them on the element it drives.
+  const lifecycle = lifecycleFor(share, owner, () => {
+    watchLateGestures();
+    UndefinedOr.map(mounted, startRecognizers);
+    UndefinedOr.map(driver, d => d.wanted());
+  });
+  /** A handler's throw, reported as a fiber's failure is (ADR-0030, decision 4); the watch goes on. */
+  const onDefect = cause => {
+    runtime.runFork(Report.failure("wardic.ward: a gesture handler failed", cause));
+  };
+  // The provider's Features, for development's word on a missing one (#511).
+  const featureRegistry = useFeatureRegistry();
+  /**
+   * A gesture's service when the element `wanted` it: its section's Feature's (#511), `undefined`
+   * without it, which development says once, unless it's on its way.
+   */
+  const gestureIn = (services, name, key, wanted) => {
+    if (Bool.not(wanted)) return undefined;
+    const service = serviceIn(services, key);
+    if (DEV && Predicate.isUndefined(service) && Bool.not(untrack(features.pending))) {
+      featureRegistry.warnOnce(name, missingMessage(name, GESTURE_WORDS[name], "@wardic/solid/unstable/v2"));
+    }
+    return service;
+  };
+  /**
+   * Start the hover, press and pan recognizers its config or a `next` now wants, each once a mount:
+   * each hover or press transition sets its gesture layer, and every event is told to the lifecycle
+   * for `next` (#257, #273).
+   */
+  const startRecognizers = m => {
+    // Each through its section's Feature (#511), read as it starts: one that arrives lazily starts from
+    // then on, as the effect below runs this again.
+    const services = untrack(features.services);
+    const hover = gestureIn(services, "hover", HoverGesture, Bool.or(untrack(wantsHover), lifecycle.wantsHover));
+    if (Predicate.isNotUndefined(hover) && Bool.not(m.hover)) {
+      m.hover = true;
+      m.watch(hover.watch(m.element, {
+        on: transition => {
+          setGesture(m.element, "hovered", transition.active);
+          lifecycle.hovered(transition, m.element);
+        },
+        // Each move while it's hovered, for `hover` (#397): told only to a `next` or `when` that asked.
+        onMove: event => lifecycle.hoverMoved(event, m.element),
+        onDefect
+      }));
+    }
+    const press = gestureIn(services, "press", PressGesture, Bool.or(untrack(wantsPress), lifecycle.wantsPress));
+    if (Predicate.isNotUndefined(press) && Bool.not(m.press)) {
+      m.press = true;
+      m.watch(press.watch(m.element, {
+        on: press => {
+          setGesture(m.element, "pressed", press.phase === "start");
+          lifecycle.pressed(press, m.element);
+        },
+        onDefect
+      }, internal.keysTaken === true, () => tapPropagates(untrack(cfg).propagate)));
+    }
+    // A pan sets no layer: only a `next` wants it (#273).
+    const pan = gestureIn(services, "pan", PanGesture, lifecycle.wantsPan);
+    if (Predicate.isNotUndefined(pan) && Bool.not(m.pan)) {
+      m.pan = true;
+      m.watch(pan.watch(m.element, {
+        on: sample => lifecycle.panned(sample, m.element),
+        onDefect
+      }, {
+        mapPoint: pointMapOptionOf(pagePoint)
+      }));
+    }
+    // In view as its `viewport` says, read when it starts (#273).
+    const inView = gestureIn(services, "inView", InViewGesture, Bool.or(untrack(wantsInView), lifecycle.wantsInView));
+    if (Predicate.isNotUndefined(inView) && Bool.not(m.inView)) {
+      m.inView = true;
+      m.watch(inView.watch(m.element, inViewOptionsOf(untrack(cfg).viewport), {
+        on: transition => {
+          setGesture(m.element, "inView", transition.active);
+          lifecycle.viewed(transition);
+        },
+        onDefect
+      }));
+    }
+    // Focused as the browser shows it (`:focus-visible`, #273).
+    const focus = gestureIn(services, "focus", FocusGesture, untrack(wantsFocus));
+    if (Predicate.isNotUndefined(focus) && Bool.not(m.focus)) {
+      m.focus = true;
+      m.watch(focus.watch(m.element, {
+        visible: true
+      }, {
+        on: focused => setGesture(m.element, "focused", focused),
+        onDefect
+      }));
+    }
+  };
+  let mounted;
+  // The last two elements given to its ref, for a second one still on the page as it mounts (#349's Q5).
+  let refdLast;
+  let refdBefore;
+  // One given after the last one left the page, which enters fresh (#414). Read as the ref is called,
+  // before Solid inserts it: one replacing the last in the same update finds it still on the page.
+  let fresh;
+  // Inside a child `mode="wait"` holds off the page (#277, ADR-0048), it mounts once the child is on
+  // it: `shown` ticks then, and the mount effect, which reads `ticked`, runs again. Only under a
+  // presence: with none, its compute calls a no-op and makes nothing. `held` cancels the wait.
+  let ticked = constUndefined;
+  let shown;
+  if (Predicate.isNotUndefined(presence)) {
+    const [read, tick] = createSignal(undefined, {
+      equals: false
+    });
+    ticked = read;
+    shown = () => tick(undefined);
+  }
+  let held;
+  const unhold = () => {
+    if (Predicate.isUndefined(held)) return;
+    held();
+    held = undefined;
+  };
+  /** Whether `el` waits off the page for its held child: its mount queued with the presence. */
+  const heldBack = el => {
+    unhold();
+    if (Predicate.isUndefined(shown)) return false;
+    held = presenceHold(presence, el, shown);
+    return Predicate.isNotUndefined(held);
+  };
+  const unmount = () => {
+    unhold();
+    if (Predicate.isUndefined(mounted)) return;
+    const left = mounted.element;
+    mounted.dispose();
+    mounted = undefined;
+    if (justLeft.size === 0) queueMicrotask(forgetJustLeft);
+    justLeft.add(left);
+  };
+  // Its element's mount goes, and its lifecycle's waits are rejected (#257): one cleanup.
+  // A driving ward's lifecycle is its given ward's, which outlives the element (#349).
+  onCleanup(() => {
+    unmount();
+    if (Predicate.isUndefined(share)) lifecycle.dispose();
+  });
+  const mount = el => {
+    if (justLeft.has(el)) throw new Error(REMADE);
+    // The ward a component was given follows this element while it's mounted (#349): one at a time.
+    let undrive;
+    if (Predicate.isNotUndefined(share)) {
+      undrive = share.drive({
+        wanted: () => {
+          UndefinedOr.map(mounted, startRecognizers);
+        },
+        readAtom: key => readEntry(key).atom,
+        atom: key => gate.valueOf(id, key)
+      }, nameOf(internal));
+    }
+    // The gate commits each frame onto the element (ADR-0006, ADR-0034); the hooks switch its
+    // `style`. An element with `onUpdate` at mount is told each committed frame (#233). While
+    // hydrating, its Appear animation is found here, taken over by its first Retarget that starts,
+    // and removed in its first commit (the Handoff, ADR-0044 decision 6).
+    const handoff = Bool.match(hydrating, {
+      onTrue: () => Option.getOrUndefined(handoffOf(el)),
+      onFalse: constUndefined
+    });
+    // Its Transform template (#443), drawn with its first write: the one at mount, then each other one
+    // its config gives.
+    const templateAtMount = configNow().transformTemplate;
+    let template = templateAtMount;
+    const registered = registeredValuesOf(templateAtMount);
+    const unregister = gate.register(id, releasingAppear(withOnUpdate({
+      target: el,
+      ...elementStyle.hooks
+    }, configNow().onUpdate, configNow), handoff, el), registered);
+    // Its values, for the projection's flights (ADR-0012 *Amendment (#137)*).
+    // None while no section has `layout`: there's no flight to follow them (#511).
+    const unregisterValues = UndefinedOr.match(builtProjection(), {
+      onUndefined: () => constVoid,
+      onDefined: projection => projection.registerValues(el, () => snapshot.values)
+    });
+    const links = startLinksOf(el, styleNow, live);
+    // Its exit record, under an <AnimatePresence>: the presence removes it once the exit settles.
+    const presenceRecord = UndefinedOr.map(presence, registrar => {
+      const record = presenceRecordOf(el, begun, (custom, inherited) => exitTargetOf(exitConfig.current, custom, snapshot, inherited), links, presenceTreeOf(initialConfig), snapshot, reducedMotion, skipAnimations);
+      registrar.register(record);
+      return record;
+    });
+    const recordFrame = recordFrameOf(presenceRecord);
+    // Its exit is drawn through its template (#443): it rides in its presence record, whose drawn values
+    // the projection reads as it leaves. A later one is written with the values it holds, so the commit
+    // that may take its Starting style off holds them.
+    // Nothing with none (#460): no follow.
+    let unfollowTemplate = constVoid;
+    if (Predicate.isNotUndefined(templateAtMount)) {
+      recordFrame(registered);
+      unfollowTemplate = followTemplate(templateAtMount, () => view.transformTemplate, reactivity.watch, next => {
+        template = next;
+        gate.write(id, {
+          ...snapshot.values,
+          [DomRenderer.TEMPLATE_KEY]: next
+        });
+        recordFrame({
+          [DomRenderer.TEMPLATE_KEY]: next
+        });
+      });
+    }
+    // Where it starts when its child takes over from a leaver (#286): asked before its layout node
+    // registers, which moves from the leaver's box, and before its first Retarget.
+    const taken = presenceSeedOf(presence, el);
+    // Its one projection node (ADR-0009, ADR-0010), its own `x`/`y` drawn on top of it (#363).
+    // Its layout animations' starts and landings, and its drag's release at rest, go to the lifecycle,
+    // for `next("layoutStart")`, `next("layoutComplete")` and `next("dragTransitionEnd")` (#257, #273):
+    // Solid 2 has no props for them.
+    let layout;
+    // A `<Reorder>` item's group registers the node, until the unmount.
+    let handedOver;
+    // `layout` on its way as it mounted (#582): its node is made as it arrives (`arriveLayout`), as
+    // Motion's is, and measures from then on; nothing before it is replayed.
+    let arriveLayout;
+    if (wantsNode) {
+      // `takenNow`: where a child that takes over from a leaver starts, at its mount only (#286).
+      const layoutNodeOn = (projection, takenNow) => {
+        const started = () => lifecycle.layoutStarted();
+        const completed = () => lifecycle.layoutCompleted();
+        const released = () => lifecycle.released();
+        const handle = projection.register(registrationOf({
+          ...layoutOptionsOf({
+            id,
+            element: el,
+            config: configNow,
+            parent: node.inherited,
+            snapshot,
+            dragTransition,
+            raiseWhileDragged: internal.raiseWhileDragged === true,
+            taken: takenNow,
+            layoutGroup,
+            reducedMotion,
+            skipAnimations,
+            heldTransform: heldTransformFor(snapshot, templateAtMount, () => template)
+          }),
+          onLayoutAnimationStart: () => started,
+          onLayoutAnimationComplete: () => completed,
+          // Its drag's Release offset at rest, for `next("dragTransitionEnd")` (#273).
+          onReleaseEnd: () => released
+        }));
+        layout = handle;
+        handedOver = UndefinedOr.map(internal.onLayoutHandle, onHandle => onHandle(handle));
+      };
+      // Its section's `layout` as it mounts: had at setup, or arrived since (#582).
+      const now = UndefinedOr.match(layoutNodes, {
+        onDefined: identity,
+        onUndefined: () => projectionIn(untrack(features.services))
+      });
+      if (Predicate.isNotUndefined(now)) layoutNodeOn(now, taken);
+      if (Predicate.isUndefined(layout)) {
+        arriveLayout = projection => {
+          if (Predicate.isNotUndefined(layout)) return;
+          layoutNodeOn(projection, undefined);
+          // A plain field, not a getter: a getter of its own on every record gave each its own shape (#582).
+          m.layout = layout;
+        };
+      }
+    }
+    // Its watch Scope (#318, #379, ADR-0055): its gesture watches and its drag track run in it, each
+    // subscribed at once with no fiber of its own, until the unmount closes it. Made at the first
+    // watch: a ward with no gesture makes and closes none.
+    let watchScope;
+    const watchIn = watch => {
+      if (Predicate.isUndefined(watchScope)) watchScope = OwnerScope.open(runtime);
+      runtime.runSync(watch.pipe(Scope.provide(watchScope)));
+    };
+    if (internal.defaultsOnElement === true) UndefinedOr.map(dragDefaults, defaults => applyDragDefaults(el, defaults));
+    // The drag track (ADR-0004): the pointer direct-sets `x`/`y` while the spring drives the rest and
+    // `whileDrag`; on a layout node it feeds the projection (ADR-0016).
+    const locked = initialConfig.dragDirectionLock === true;
+    // Its section's `drag` Feature drives it (#511): without it, `drag` does nothing, and development
+    // says so once, unless `drag` is on its way.
+    const dragGesture = gestureIn(untrack(features.services), "drag", DragGesture, Predicate.isNotUndefined(dragAxis));
+    // Whether its track drives its layout node (ADR-0016): the node it has as the track is made, at
+    // mount or as `drag` arrives; a node made later leaves it moving `x`/`y` (#582).
+    let dragProjected = false;
+    const driveDrag = gesture => {
+      const axis = UndefinedOr.getOrThrow(dragAxis);
+      dragProjected = Predicate.isNotUndefined(layout);
+      // Motion's `dragConstraints` (#273): a box of numbers, or a container measured against the element.
+      const constraints = gesture.constraintsOf(initialConfig.dragConstraints, el, () => untrack(cfg).onMeasureDragConstraints, pagePoint);
+      return gesture.drive({
+        watch: track => watchIn(track(onDefect)),
+        fork: response => void runtime.runFork(response),
+        gate,
+        id,
+        element: el,
+        snapshot,
+        recordFrame,
+        // A drag's start turns its `style`'s will-change value on (#443).
+        setDragging: draggingWithWillChange(live, on => setGesture(el, "dragging", on)),
+        mapPoint: pagePoint,
+        skipAnimations,
+        config: {
+          axis,
+          constraints: constraints.constraints,
+          elastic: initialConfig.dragElastic,
+          momentum: initialConfig.dragMomentum,
+          snapToOrigin: initialConfig.dragSnapToOrigin,
+          propagation: initialConfig.dragPropagation,
+          directionLock: initialConfig.dragDirectionLock,
+          transition: dragTransition,
+          listen: initialConfig.dragListener
+        },
+        container: constraints.container,
+        controls: initialConfig.dragControls,
+        ...UndefinedOr.match(layout, {
+          onUndefined: () => ({}),
+          onDefined: projectionNode => ({
+            projection: projectionNode
+          })
+        }),
+        ...UndefinedOr.match(internal.dragAxis, {
+          onUndefined: () => ({}),
+          onDefined: axisAt => ({
+            axisAt
+          })
+        }),
+        // Its samples to a `<Reorder>` item's group, and to the lifecycle for `next("dragStart")` (#257)
+        // and, with a direction lock, `next("directionLock")` (#273).
+        onSample: UndefinedOr.match(internal.onDragSample, {
+          onUndefined: () => sample => lifecycle.dragged(sample, locked, el),
+          onDefined: onSample => sample => {
+            onSample(sample);
+            lifecycle.dragged(sample, locked, el);
+          }
+        }),
+        // Its release at rest, for `next("dragTransitionEnd")` (#273).
+        onReleaseEnd: () => lifecycle.released()
+      });
+    };
+    let dragTrack = UndefinedOr.map(dragGesture, driveDrag);
+    const spineOptions = {
+      runtime,
+      gate,
+      id,
+      element: el,
+      tag: internal.tag,
+      config: configNow,
+      parent: node.inherited,
+      canStart: node.canStart,
+      extraDelay: node.extraDelay,
+      byName: node.names,
+      onFrame: node.onFrame,
+      reducedMotion,
+      skipAnimations,
+      positionalKeys,
+      defaultTransition,
+      start: begun,
+      snapshot,
+      reuse,
+      links,
+      styleNow,
+      live,
+      presence: presenceRecord,
+      projected: Predicate.isNotUndefined(layout),
+      dragAxis,
+      drag: dragTrack,
+      handoff,
+      animation: lifecycle
+    };
+    // A `drag` on its way as it mounted (#551): its track starts as the Feature arrives (`startDrag`),
+    // and the spine reads it at each Retarget from then on. Only then is `drag` a getter, so an
+    // element that has it at mount, or never wants it, pays nothing.
+    let startDrag;
+    if (Predicate.isNotUndefined(dragAxis) && Predicate.isUndefined(dragTrack) && untrack(features.pending)) {
+      Object.defineProperty(spineOptions, "drag", {
+        get: () => dragTrack
+      });
+      // Whether that track drives the layout node (#582): until it starts, whether the element has one.
+      Object.defineProperty(spineOptions, "projected", {
+        get: () => UndefinedOr.match(dragTrack, {
+          onUndefined: () => Predicate.isNotUndefined(layout),
+          onDefined: () => dragProjected
+        })
+      });
+      startDrag = gesture => {
+        if (Predicate.isUndefined(dragTrack)) dragTrack = driveDrag(gesture);
+      };
+    }
+    const spine = makeElementSpine(spineOptions);
+    // A child back under its key starts where its leaver is drawn (#286), before its first Retarget.
+    if (Predicate.isNotUndefined(taken)) spine.seed(taken);
+    // Live values in `style` (#130, ADR-0043): followed from the first routed key on.
+    spine.follow({
+      resolved: () => untrack(target).resolved,
+      dragging: () => untrack(dragging)
+    });
+    // Its Imperative animations (#433) go through its spine while it's mounted, and its Animation controls reach it.
+    const unregisterAnimatable = registerAnimatable(el, spine);
+    const unsubscribe = UndefinedOr.match(controls, {
+      onUndefined: () => constVoid,
+      onDefined: c => subscribe(c.controls, controlledElement(c.set, {
+        custom: () => untrack(() => view.custom),
+        snapshot
+      }, spine.stop))
+    });
+    const m = {
+      element: el,
+      spine,
+      layout,
+      arriveLayout,
+      watch: watchIn,
+      startDrag,
+      hover: false,
+      press: false,
+      pan: false,
+      inView: false,
+      focus: false,
+      dispose: () => {
+        if (Predicate.isNotUndefined(undrive)) undrive();
+        UndefinedOr.map(mountedHook, end => end());
+        unregisterAnimatable();
+        unsubscribe();
+        spine.dispose();
+        // Its gesture watches' and drag track's listeners go, a running release stops, and their spans end.
+        UndefinedOr.map(watchScope, scope => OwnerScope.close(runtime, scope, "wardic.ward: a finalizer failed"));
+        // The group lets go of the node before it's disposed.
+        UndefinedOr.map(handedOver, release => release());
+        UndefinedOr.map(layout, node => node.dispose());
+        unfollowTemplate();
+        unregisterValues();
+        unregister();
+      }
+    };
+    startRecognizers(m);
+    const mountedHook = UndefinedOr.map(internal.onMount, onMount => onMount(el, make => watchIn(make(onDefect))));
+    return m;
+  };
+  // A `while*` target set after mount starts its recognizer then (#87, ADR-0040). Its compute reads
+  // the two keys, so only their changes re-run it (#259).
+  // Its section's Features are read there too, so a gesture's arriving lazily starts it (#511): each
+  // start checks what's wanted.
+  // An element whose config can never want one (`gestureless`, #525) makes it at its first want
+  // through its lifecycle instead: no computation an element until then.
+  let watchingLate = false;
+  const watchLateGestures = () => {
+    if (watchingLate) return;
+    watchingLate = true;
+    runWithOwner(owner, () => createEffect(() => ({
+      wanted: Bool.some([wantsHover(), wantsPress(), wantsInView(), wantsFocus()]),
+      services: features.services()
+    }), () => {
+      UndefinedOr.map(mounted, startRecognizers);
+    }, CLIENT_ONLY_SYNC_DEFERRED));
+  };
+  if (internal.gestureless !== true) watchLateGestures();
+  // `layout` on its way (#582): an element mounted before it arrives makes its node then, as its
+  // gestures and drag start theirs; a load that brings none gets development's word then.
+  if (Bool.and(wantsNode, Predicate.isUndefined(layoutProjection)) && untrack(features.pending)) {
+    createEffect(() => ({
+      services: features.services(),
+      pending: features.pending()
+    }),
+    // Its apply returns nothing: a function returned there would be its cleanup.
+    ({
+      services,
+      pending
+    }) => {
+      UndefinedOr.map(mounted, m => layoutArrivedIn(m.arriveLayout, services));
+      if (DEV && Predicate.isUndefined(projectionIn(services)) && Bool.not(pending)) {
+        featureRegistry.warnOnce("layout", missingMessage("layout", LAYOUT_PROPS, "@wardic/solid/unstable/v2"));
+      }
+    }, CLIENT_ONLY_DEFERRED);
+  }
+  // A `drag` on its way (#551): an element mounted before it arrives starts its track then, as its
+  // gestures' recognizers do, and nothing before it is replayed; a load that brings none gets
+  // development's word then.
+  if (Predicate.isNotUndefined(dragAxis) && untrack(features.pending)) {
+    createEffect(() => ({
+      services: features.services(),
+      pending: features.pending()
+    }),
+    // Its apply returns nothing: a function returned there would be its cleanup.
+    ({
+      services,
+      pending
+    }) => {
+      UndefinedOr.match(serviceIn(services, DragGesture), {
+        // A `layout` from the same load makes its node first, so the track drives it (#582).
+        onDefined: gesture => UndefinedOr.map(mounted, m => {
+          layoutArrivedIn(m.arriveLayout, services);
+          UndefinedOr.map(m.startDrag, start => start(gesture));
+        }),
+        onUndefined: () => {
+          if (DEV && Bool.not(pending)) featureRegistry.warnOnce("drag", missingMessage("drag", GESTURE_WORDS.drag, "@wardic/solid/unstable/v2"));
+        }
+      });
+    }, CLIENT_ONLY_DEFERRED);
+  }
+  // A `layoutDependency` change re-measures its layout node (not at mount: it measures as it registers).
+  // Only a change of its value: a memo, since a Solid 2 effect applies on every re-run of its compute,
+  // and `cfg()` is re-read on any of the config's changes (a `style` change re-measured, #209 PR 5's lab).
+  // Its node may be made as `layout` arrives (#582), so it's read at each change.
+  if (wantsNode) {
+    const dependency = createMemo(() => cfg().layoutDependency, CLIENT_ONLY);
+    createEffect(dependency, () => {
+      UndefinedOr.map(UndefinedOr.map(mounted, m => m.layout), node => node.notify());
+    }, CLIENT_ONLY_DEFERRED);
+  }
+  // Whether the `when` gate lets a Retarget start (ADR-0007), as a memo: an element with variants of
+  // its own reads its `when` off its config, and only a flip of the gate may re-run the effect.
+  const open = gateOf(node);
+  // Mount, then Retarget on each change of the target or of the `when` gate: both are read here,
+  // so a gate's flip re-runs it and releases a held Retarget. Only once the ref has given the
+  // element (#320): until then the effect reads nothing else, so the target is first resolved with
+  // its element, once, and a config that lands before the element (an async one) doesn't run it.
+  createEffect(() => {
+    const el = element();
+    if (Predicate.isUndefined(el)) return undefined;
+    return {
+      el,
+      resolution: target(),
+      open: open(),
+      shown: ticked()
+    };
+  }, mounting => {
+    if (Predicate.isUndefined(mounting)) return;
+    const {
+      el,
+      resolution
+    } = mounting;
+    if (Predicate.isUndefined(mounted) || mounted.element !== el) {
+      // Another element it was spread on, or the one it's on, still on the page: a ward drives one
+      // element at a time (#349's Q5). One the page has let go of is left behind.
+      if (Bool.or(stillOn(refdBefore, el), stillOn(UndefinedOr.map(mounted, elementOfMount), el))) throw new Error(secondElement("ward(config)"));
+      refdBefore = undefined;
+      // Held off the page: nothing starts until it's on it.
+      if (heldBack(el)) return;
+      // A new element starts with no gesture on, read from its gesture state (#257's audit).
+      unmount();
+      // One that came after the last left the page enters fresh (#414).
+      if (el === fresh) beginFresh();
+      // Its config is read at mount (its layout node's options, its `onUpdate`, its spine's) through
+      // the per-key view (#259): untracked, so said, as the Retarget below.
+      mounted = untrack(() => mount(el));
+    }
+    // The spine reads the variant context (its gates, its stagger, what it inherits) at the
+    // Retarget, once: untracked, so said (Solid 2's dev build warns of a reactive read in an
+    // effect's apply, STRICT_READ_UNTRACKED). The effect's compute is what re-runs it.
+    const spine = mounted.spine;
+    untrack(() => spine.retarget(resolution));
+  }, CLIENT_ONLY_SYNC);
+  // `<card.Provider>` hands down what this element hands its children (#50).
+  const Provider = props => WardicVariantContext(new _P$(node, props));
+  // The element's value per key (#130, ADR-0043 decision 5): the gate's output while it holds the
+  // key, else where the key rests. One accessor a key, made on first ask, under the ward's owner. It
+  // carries its Atom (#209 PR 3's Q2): a `style` given it follows the Atom, set at the gate's write,
+  // so a key derived from it paints in the same frame. Where the key rests is Solid's (the user's
+  // style), mirrored into an Atom of its own.
+  let reads;
+  const readEntry = key => {
+    if (Predicate.isUndefined(reads)) reads = new Map();
+    const known = reads.get(key);
+    if (Predicate.isNotUndefined(known)) return known;
+    const output = gate.valueOf(id, key);
+    const following = drivenAtom();
+    const entry = runWithOwner(owner, () => {
+      const resting = createMemo(() => {
+        withCallsOf()[0]();
+        return restingOf(key, start.initialValues, userStyle(), raw => live.read(raw));
+      }, CLIENT_ONLY);
+      const restingAtom = Atom.make(untrack(resting));
+      onCleanup(registry().mount(restingAtom));
+      createEffect(resting, value => {
+        registry().set(restingAtom, value);
+      }, CLIENT_ONLY_DEFERRED);
+      const own = Atom.make(get => UndefinedOr.match(get(output), {
+        onUndefined: () => get(restingAtom),
+        onDefined: identity
+      }));
+      // Given to a component (#349): what the element it drives shows, while it's there.
+      const atom = Atom.make(get => UndefinedOr.match(get(following), {
+        onUndefined: () => get(own),
+        onDefined: d => get(d.readAtom(key))
+      }));
+      return {
+        accessor: followAtom(registry(), atom),
+        atom
+      };
+    });
+    reads.set(key, entry);
+    return entry;
+  };
+  const read = key => readEntry(key).accessor;
+  // Its `atom(key)`: the gate's output, or, given to a component (#349), the one of the element it drives.
+  const atomOf = key => {
+    const own = gate.valueOf(id, key);
+    const following = drivenAtom();
+    return Atom.make(get => UndefinedOr.match(get(following), {
+      onUndefined: () => get(own),
+      onDefined: d => get(d.atom(key))
+    }));
+  };
+  // The element's style, read where it renders. The keys still loading at setup (#257 item 1) are
+  // read there too, with the target, so its region holds until they land and Solid retries it: the
+  // Retarget reads `transition` as it starts, untracked, which a pending one would throw out of.
+  // After that a refetch keeps the last value (Solid holds the previous one), and holds nothing.
+  const holdWhileLoading = Bool.match(setup.pending.length === 0, {
+    onTrue: () => constVoid,
+    onFalse: () => {
+      const config = cfg();
+      // Client-only, so transparent to hydration ids as every computation of the binding's is (#618).
+      const loaded = createMemo(() => {
+        Arr.forEach(setup.pending, key => void config[key]);
+        target();
+        return true;
+      }, CLIENT_ONLY);
+      return () => {
+        loaded();
+      };
+    }
+  });
+  const renderedStyle = () => {
+    holdWhileLoading();
+    return elementStyle.style(userStyle());
+  };
+  // The ward: a ref, and its own props. Under a presence, its element is told to it as it's made
+  // (#286): its `key`, and whether it's a twin.
+  // What it shares with a component it's given to (#349), made when one asks.
+  let shared;
+  const sharedNow = () => {
+    if (Predicate.isNotUndefined(shared)) return shared;
+    /**
+     * A ward driving an element for this one, given to a component (#349): followed until the release,
+     * its `read` and `atom` Atoms reading the driver's. One at a time, and not while this one is on an
+     * element of its own (#349's Q5).
+     */
+    const drive = (next, name) => {
+      if (Bool.or(Predicate.isNotUndefined(driver), stillOn(UndefinedOr.map(mounted, elementOfMount), undefined))) throw new Error(secondElement(name));
+      driver = next;
+      UndefinedOr.map(driven, atom => registry().set(atom, next));
+      return () => {
+        if (driver !== next) return;
+        driver = undefined;
+        UndefinedOr.map(driven, atom => registry().set(atom, undefined));
+      };
+    };
+    shared = {
+      config,
+      setup: initialConfig,
+      internal,
+      parent,
+      chosen: Predicate.isNotUndefined(internal.parent),
+      carries: carriesVariants(initialConfig),
+      provided: node.provided,
+      layoutGroup,
+      node,
+      lifecycle,
+      drive
+    };
+    return shared;
+  };
+  const setMade = madeWith(presence, setElement, initialConfig);
+  const self = value => {
+    if (isElement(value)) {
+      const last = refdLast;
+      if (Predicate.isNotUndefined(last)) {
+        if (last !== value) {
+          refdBefore = last;
+          if (Bool.not(last.isConnected)) fresh = value;
+        }
+      }
+      refdLast = value;
+      setMade(value);
+      return undefined;
+    }
+    return spreadNow();
+  };
+  // What a spread of the ward reads (#495): its spread's props alone, made at its first spread, so a
+  // ward given only to `ref` makes none, and a Reorder item's keyboard attributes are in it.
+  let spread;
+  // Its `style` and its attributes as descriptors, made once (#460): its own keys, its spread and each
+  // `.with()` share them.
+  const styleKey = {
+    get: renderedStyle,
+    enumerable: true
+  };
+  const attributes = attributeKeysOf(seed.attrs, Predicate.isNotUndefined(dragDefaults));
+  const spreadNow = () => {
+    if (Predicate.isUndefined(spread)) spread = spreadOfWard(self, {
+      value: self,
+      enumerable: true
+    }, styleKey, attributes);
+    return spread;
+  };
+  // Its members are the ones every ward shares (#525), reading this state: its own are `ref`, `style`
+  // and its attributes.
+  const state = {
+    shared: sharedNow,
+    Provider,
+    read,
+    atom: atomOf,
+    with: own => {
+      given = own;
+      withCallsOf()[1](undefined);
+      return spreadPropsOf({
+        ref: {
+          value: withRef(own.ref, self),
+          enumerable: true
+        },
+        style: styleKey,
+        ...attributes
+      });
+    },
+    lifecycle,
+    settled: undefined,
+    tapped: undefined,
+    next: undefined,
+    each: undefined,
+    when: undefined
+  };
+  Object.setPrototypeOf(self, WARD_MEMBERS);
+  Object.defineProperties(self, {
+    [WARD_STATE]: {
+      value: state
+    },
+    ref: {
+      value: self,
+      enumerable: true
+    },
+    style: styleKey,
+    ...attributes
+  });
+  return self;
+}
+/** No `.with()` props: the config's style alone. */
+const NO_WITH = {};
+/** The last `.with()` merge, by its two styles: `style` reads it more than once a run. */
+// Module state (#460, Q7): a cache held weakly by the object it's for, so it goes with it.
+const withMerges = new WeakMap();
+/**
+ * The config's `style` with a `.with()` style over it, key by key (#264, `Style.over`): the config's
+ * as it is with none. One merge for the same two styles, so the element's Live values see one object.
+ */
+const withStyleOver = (own, extra) => {
+  if (Predicate.isUndefined(extra)) return own;
+  if (Predicate.isString(extra)) return Style.over(extra, own);
+  return Option.getOrElse(Option.map(Option.filter(Option.fromUndefinedOr(withMerges.get(extra)), known => known.own === own), known => known.merged), () => {
+    const merged = Style.over(extra, own);
+    withMerges.set(extra, {
+      own,
+      merged
+    });
+    return merged;
+  });
+};
+/** A `.with()` ref beside the ward's own: the user's first, as `refsOf` orders them. */
+const withRef = (user, self) => {
+  if (Predicate.isUndefined(user)) return self;
+  const refs = Arr.ensure(user);
+  return element => {
+    Arr.forEach(refs, ref => ref(element));
+    self(element);
+  };
+};
+/**
+ * The Starting style's attributes, and a drag element's default ones when it `drags`, as a ward's own
+ * keys: enumerable, so a spread applies them. Made once a ward (#460), into one map.
+ */
+const attributeKeysOf = (attrs, drags) => {
+  const keys = {};
+  addAttributeKeys(keys, attrs);
+  if (drags) addAttributeKeys(keys, Style.DRAG_DEFAULT_ATTRIBUTES);
+  return keys;
+};
+/** Each of `attrs` as an enumerable key, into `keys`: a later one wins a key both set. */
+const addAttributeKeys = (keys, attrs) => Arr.forEach(Object.keys(attrs), key => {
+  keys[key] = {
+    value: attrs[key],
+    enumerable: true
+  };
+});
+/**
+ * A spread's props, reaching no name but their own (#495): what a ward, its `.with()` or a Reorder group
+ * hands an element's spread, and nothing else. Solid 2's `merge` calls a function source and reads each key off
+ * what it returns with `in`, so a ward that returned itself shadowed the element's props with its own
+ * names (`name`, `length`, `read`, `next`…), and an object with a prototype would with
+ * `Object.prototype`'s (`constructor`, `toString`).
+ */
+export const spreadPropsOf = descriptors => Object.defineProperties(new SpreadProps(), descriptors);
+/**
+ * What a spread's props are made from (#495): a constructor whose prototype has no prototype and no
+ * names, so its objects reach none but their own. An `Object.create(null)` would too, but V8 keeps it
+ * in dictionary mode: 217 bytes each in Node 24, against 49 (`.tmp/495/spreadmem.mjs`).
+ */
+const SpreadProps = function SpreadProps() {};
+SpreadProps.prototype = Object.create(null);
+/** The props a Reorder item adds to its ward's spread (#495): its keyboard attributes. Only items have them. */
+// Module state (#460, Q7): a cache held weakly by the object it's for, so it goes with it.
+const SPREAD_EXTRAS = new WeakMap();
+/**
+ * `ward` with `descriptors` defined on it and added to its spread (#495), for a ward that carries props
+ * of its own kind (a Reorder item's keyboard attributes). Before the ward's first spread.
+ */
+export const withSpreadProps = (ward, descriptors) => {
+  SPREAD_EXTRAS.set(ward, descriptors);
+  return Object.defineProperties(ward, descriptors);
+};
+/** A ward's spread: its `ref`, `style` and attributes, and what {@link withSpreadProps} added, on no prototype. Made at its first spread (#460: one map). */
+const spreadOfWard = (ward, ref, style, attributes) => {
+  const extras = SPREAD_EXTRAS.get(ward);
+  if (Predicate.isUndefined(extras)) return spreadPropsOf({
+    ref,
+    style,
+    ...attributes
+  });
+  return spreadPropsOf({
+    ref,
+    style,
+    ...attributes,
+    ...extras
+  });
+};
+/** A server's output Atom: nothing is written there, so it stays `undefined`. */
+const NO_OUTPUT = Atom.make(undefined);
+/** A style value read on a server: an Atom through a server's own registry, an accessor called (#130). */
+const readServerStyle = value => readLive(value, serverRegistryOf, untrack);
+/**
+ * {@link wardWith} during a server render (ADR-0021, decisions 1 and 4): the element's Starting
+ * style and attributes, computed purely, and nothing else: no runtime, no spine, no signals. It
+ * makes the client's one `createUniqueId` call, so later hydration keys land where the client's
+ * render puts them, and its `.Provider` renders the same nesting, with the same names and inert
+ * orchestration. No Appear animation yet (PR 4 of #209).
+ */
+const serverWard = (config, internal) => {
+  createUniqueId();
+  const view = configuredView(WARD_VIEW.of(config, internal.fixed), useWardicConfig());
+  // A key still loading (#257 item 1): one setup fixes is the client's error here too. One the ward
+  // reads as it goes is read again, throwing Solid's `NotReadyError`: a server waits for it and
+  // renders the component again, so its region streams once the data is in, Appear and all.
+  // Both are checked before the read that waits.
+  const setup = WARD_VIEW.setupOf(view);
+  // Animation controls (#433) set nothing on a server: no entry yet, and controlled, as on the client.
+  const atSetup = uncontrolledOf(configAtSetup(setup));
+  // Where it's made, its given parent's, or its given ward's (#349).
+  const parent = variantParentOf(internal);
+  const presenceBlocks = presenceBlocksInitial(usePresenceContext());
+  if (Bool.and(Arr.contains(setup.pending, "animate"), startsAtAnimate(atSetup, inheritedContext(atSetup, parent), presenceBlocks))) throw new Error(STARTS_AT_PENDING);
+  const c = uncontrolledOf(WARD_VIEW.snapshotOf(view));
+  const node = serverVariantNode(c, parent);
+  const initialValues = startOf(c, node.inherited, presenceBlocks, untrack).initialValues;
+  const layoutNode = isLayoutNode(c);
+  const seed = Style.starting(internal.tag, drawnAtRest(initialValues, layoutNode, c.transformTemplate));
+  // Its Appear animation (#48, ADR-0044): its slot in the render's, and the group its Variant
+  // children join when it leads one.
+  const appear = appearEntryOf(useWardicAppear(), c, internal.tag, initialValues, node, startsQuiet(c, node.inherited, presenceBlocks, untrack), settingOf(useWardicConfig()), useWardicSkipAnimations()());
+  // A late chunk's root (#245): the chunk's Appear rules go through the head registry, read once
+  // the chunk has rendered and streamed with it as a head patch. A late element under another late
+  // one registers too: the first read writes the batch, and any other finds it written and adds no
+  // tag, so Solid 1's `within` (which kept a chunk to one `<style>` node) isn't needed.
+  if (appear.chunkRoot) UndefinedOr.map(appear.state, state => useHead(appearStyle(state.chunkCss, state.nonce)));
+  const Provider = props => WardicVariantContext(new _P$2(appear, props));
+  // Its routed keys' values join the Starting style, under `initial`'s (#130); a `<Reorder>` item's
+  // base style, a drag element's defaults, then its Appear slot go under the user's style. A user
+  // style with its own `animation` keeps it, over the slot, and the slot is left undefined.
+  const dragDefaults = dragDefaultsOf(c, internal);
+  // The element's style for its user style: the config's, or a `.with()` style over it (#264).
+  const styleFor = user => {
+    const parts = split(user);
+    if (setsAnimation(parts.css)) appear.veto("its own style sets an animation");
+    return pipe(serverStartingStyle(internal.tag, seed.style, initialValues, parts.routed, layoutNode, untrack, c.transformTemplate), Style.over(parts.css), Style.over(UndefinedOr.match(internal.baseStyle, {
+      onUndefined: constUndefined,
+      onDefined: base => base()
+    })), Style.over(dragDefaults), Style.over(appear.style));
+  };
+  const style = styleFor(c.style);
+  let given = NO_WITH;
+  const attributes = attributeKeysOf(seed.attrs, Predicate.isNotUndefined(dragDefaults));
+  // A spread of it reads its spread's props alone, made at its first spread, as the client's (#495).
+  let spread;
+  const self = () => {
+    if (Predicate.isUndefined(spread)) spread = spreadOfWard(self, {
+      value: noRef,
+      enumerable: true
+    }, {
+      value: style,
+      enumerable: true
+    }, attributes);
+    return spread;
+  };
+  // What it shares with a component it's given to (#349): a server's component renders its own.
+  const shared = {
+    config,
+    setup: atSetup,
+    internal,
+    parent,
+    chosen: Predicate.isNotUndefined(internal.parent),
+    carries: carriesVariants(atSetup),
+    provided: appear.provided,
+    layoutGroup: useLayoutGroupId(),
+    node: undefined,
+    lifecycle: undefined,
+    drive: () => constVoid
+  };
+  Object.defineProperties(self, {
+    [WARD]: {
+      value: shared
+    },
+    ref: {
+      value: noRef,
+      enumerable: true
+    },
+    style: {
+      value: style,
+      enumerable: true
+    },
+    ...attributes,
+    Provider: {
+      value: Provider
+    },
+    read: {
+      value: key => () => restingOf(key, initialValues, withStyleOver(c.style, given.style), readServerStyle)
+    },
+    atom: {
+      value: () => NO_OUTPUT
+    },
+    // Nothing animates on a server: nothing has landed, and nothing will.
+    settled: {
+      value: constUndefined
+    },
+    // Nothing is pressed on a server either.
+    tapped: {
+      value: constUndefined
+    },
+    next: {
+      value: neverLands
+    },
+    each: {
+      value: () => NO_EVENTS
+    },
+    when: {
+      value: serverWhen
+    },
+    // The element's own style over the config's, rendered in its Starting style (#264).
+    with: {
+      value: own => {
+        given = own;
+        return spreadPropsOf({
+          ref: {
+            value: noRef,
+            enumerable: true
+          },
+          style: {
+            value: styleFor(withStyleOver(c.style, own.style)),
+            enumerable: true
+          },
+          ...attributes
+        });
+      }
+    }
+  });
+  return self;
+};
+/** A server render's `ref`: Solid never calls it there. */
+const noRef = constUndefined;
+//# sourceMappingURL=ward.js.map