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

package/dist/solid/create-ward.jsx

@@ -0,0 +1,874 @@
+import { tapPropagates } from "./press.js";
+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 { mergeRefs } from "@solid-primitives/refs";
+import * as Arr from "effect/Array";
+import * as Bool from "effect/Boolean";
+import { constUndefined, identity, pipe } from "effect/Function";
+import * as Option from "effect/Option";
+import * as Predicate from "effect/Predicate";
+import * as Rec from "effect/Record";
+import * as UndefinedOr from "effect/UndefinedOr";
+import { Atom } from "effect/reactivity";
+import { createComputed, createEffect, createMemo, createSignal, createUniqueId, DEV, getOwner, on, onCleanup, runWithOwner, untrack, } from "solid-js";
+import { controlledConfigOf, controlledElement, isAnimationControls, subscribe, uncontrolledOf } from "./animation-controls.js";
+import { fromAtom, watchToSignal } from "./bridge.js";
+import { pointMapOptionOf, settingOf, withConfigTransition } from "./wardic-config-value.js";
+import { dragTransitionOf, runDragTrackWith } from "./drag.js";
+import { createElementStyle } from "./element-style.js";
+import { createLiveStyle, readLive, serverRegistryOf, split } from "./live-style.js";
+import { createVariantNode } from "./variant-node.js";
+import { serverVariantNode, startingValuesOf, startsQuiet } from "./variant-tree.js";
+import { registerAnimatable } from "./imperative.js";
+import { projectionNodeOf, useLayoutGroupId } from "./layout.jsx";
+import { layoutOptionsOf, wantsLayoutNode } from "./layout-member.js";
+import { GESTURE_WORDS, hasService, serviceIn } from "./gesture-features.js";
+import { handoffOf, setsAnimation } from "./appear.js";
+import { presenceBlocksInitial, presenceHold, usePresenceContext } from "./presence.jsx";
+import { presenceSeedOf } from "./presence-record.js";
+import { createWhenWanted, NEVER_STARTED, stateOf } from "./sensors.js";
+import { gestureCallbacksOf, inViewOptionsOf, wantsFocus, wantsHover, wantsInView, wantsPan, wantsPress } from "./gesture-callbacks.js";
+import { LAYOUT_PROPS, missingMessage, unreadColorIn } from "./feature.js";
+import { runWatch, useBuiltProjection, useElementFeatures, useFeatureRegistry, useWardicAppear, useWardicDefaultTransition, useWardicGate, useWardicPositionalKeys, useWardicReducedMotion, useWardicRenderer, useWardicRuntime, useWardicSkipAnimations } from "./provider.jsx";
+import { useWardicConfig } from "./wardic-config.jsx";
+import { transformPagePointOf } from "./wardic-config-value.js";
+import { projectionIn } from "./runtime.js";
+import { isHydrating, isServer } from "./server.js";
+import { reactivity } from "./solid-reactivity.js";
+import { accessorOf, animationCallbacks, applyDragDefaults, dragAxisOf, dragDefaultsOf, draggingWithWillChange, drawnAtRest, followTemplate, heldTransformFor, registeredValuesOf, flagStartingStyle, isLayoutNode, madeWith, makeElementSpine, makeReuse, exitConfigOf, exitTargetOf, presenceTreeOf, presenceRecordOf, recordFrameOf, registryOf, resolutionOf, restingOf, sameResolution, serverStartingStyle, snapshotOf, startLinksOf, startOf, warnDroppedTransform, withOnUpdate, releasingAppear, appearEntryOf, } from "./spine.js";
+import { useVariantContext, WardicVariantContext } from "./variants.js";
+import { DragGesture, FocusGesture, HoverGesture, InViewGesture, PanGesture, PressGesture } from "./features/keys.js";
+/** A `<Reorder>` item's additions when there are none: a plain element's. */
+const NO_INTERNALS = {};
+/**
+ * Whether an element wants each gesture recognizer (#87, #273), its section having the gesture's
+ * Feature (#511): shared by every element.
+ */
+const WANTS = {
+    hover: (w) => wantsHover(w.config) && hasService(w.services, HoverGesture),
+    press: (w) => wantsPress(w.config) && hasService(w.services, PressGesture),
+    inView: (w) => wantsInView(w.config) && hasService(w.services, InViewGesture),
+    focus: (w) => wantsFocus(w.config) && hasService(w.services, FocusGesture),
+    pan: (w) => wantsPan(w.config) && hasService(w.services, PanGesture),
+};
+/** Each gesture a config may want, its Feature's name and key: what development's word on a missing one checks (#511). */
+const GESTURE_FEATURES = [
+    ["hover", wantsHover, HoverGesture],
+    ["press", wantsPress, PressGesture],
+    ["inView", wantsInView, InViewGesture],
+    ["focus", wantsFocus, FocusGesture],
+    ["pan", wantsPan, PanGesture],
+];
+/** A `ward()` call's user props when it's given none. */
+const NO_USER_PROPS = {};
+/**
+ * `given` with its `animate` read once (#433): **Animation controls** make each change they make its
+ * entry, the config marked controlled; anything else leaves it as it is. Under a `WardicConfig`, its
+ * **Config transition** is its own when it gives none (#434).
+ */
+export const controlledOf = (given) => {
+    const configured = configuredOf(given, useWardicConfig());
+    const animate = untrack(configured).animate;
+    if (Bool.not(isAnimationControls(animate)))
+        return { cfg: configured, controls: undefined };
+    const [change, set] = createSignal(undefined);
+    return { cfg: () => controlledConfigOf(configured(), change()), controls: { controls: animate, change, set: (made) => set(() => made) } };
+};
+/**
+ * `given` with its **Config transition** as its own when it gives none (#434, Motion's
+ * `{ ...config, ...props }`), one object per change; `given` itself with no `WardicConfig` above.
+ */
+const configuredOf = (given, config) => {
+    if (Predicate.isUndefined(config))
+        return given;
+    return createMemo(() => withConfigTransition(given(), config));
+};
+/** No change: an element without Animation controls. */
+const NO_CHANGE = constUndefined;
+/**
+ * The fixed motion spine, factored out so both sink shapes share it (ADR-0006):
+ *
+ *   on(el) once-defined -> gate.register(id, makeSink(element)) -> recognizers
+ *   (hover/press) -> override-stack memo from cfg() -> on(target) Retarget
+ *   (springValues / animateValues seeded from the Snapshot ref) -> gate.write.
+ *
+ * The caller supplies `makeSink`: the gate commits the flushed `Patch` onto the element,
+ * whichever surface owns it (ADR-0034). `initial` is read EXACTLY ONCE at setup (`untrack`) to seed the
+ * spring's `from` Snapshot (ADR-0003); `animate` / `whileHover` / `whileTap` /
+ * `transition` / `variants` are read reactively through `cfg()`.
+ *
+ * Must be called within a Solid owner (it registers `createEffect` / `onCleanup`).
+ */
+/**
+ * Whether a ward's element waits off the page for its held child (#277, ADR-0048): its start queued
+ * with the presence (`shown`, made only under one), cancelled with the effect's run.
+ */
+const heldBack = (presence, element, shown) => {
+    if (Predicate.isUndefined(shown))
+        return false;
+    const cancel = presenceHold(presence, element, shown);
+    if (Predicate.isUndefined(cancel))
+        return false;
+    onCleanup(cancel);
+    return true;
+};
+/** An element's layout node now: made at its mount, or as `layout` arrived (#582). */
+const layoutNodeOf = (atMount, later) => UndefinedOr.match(atMount, { onDefined: identity, onUndefined: () => UndefinedOr.match(later, { onDefined: (l) => l.handle, onUndefined: constUndefined }) });
+export function runSpine(opts) {
+    const { bindGestures, byName, canStart, cfg, controls, defaultsInProps, el, entersFresh, extraDelay, gate, hydrating, id, internal = NO_INTERNALS, live, makeSink, onFrame, parent, restartStyle, runtime, styleOf, tag } = opts;
+    // Its Features (#511, ADR-0067): its section's, and those it brings.
+    const features = UndefinedOr.match(opts.features, { onDefined: identity, onUndefined: () => useElementFeatures(internal.brings, internal.complete === true) });
+    // 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();
+    // 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 });
+    // The nearest <AnimatePresence>, or undefined at the root (ADR-0007). When
+    // present, this spine publishes its live value-map (`snapshot`) + exit target
+    // (`exit`) into a presence registration; the PARENT drives the exit on leave
+    // (this child is disposed). The child does NOT unregister on its own
+    // onCleanup — <AnimatePresence> owns removal after the exit settles.
+    const presence = usePresenceContext();
+    // The Layout group it's made in (#432): its `layoutId`'s namespace.
+    const layoutGroup = useLayoutGroupId();
+    // Whether reduced motion applies (ADR-0029), read at each Retarget.
+    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();
+    // What a key with no transition of its own runs on (ADR-0051).
+    const defaultTransition = useWardicDefaultTransition();
+    // Starting style: resolved purely from the config read EXACTLY ONCE (untrack — no
+    // reactive dependency, must not re-seed after mount), with the inherited `initial`
+    // name for a Variant child that has none (#50). Seeds the spring `from` Snapshot so
+    // frame 1 flows continuously out of it (no snap).
+    const start = startOf(untrack(cfg), parent, presenceBlocksInitial(presence), untrack);
+    const snapshot = snapshotOf(start);
+    const reuse = makeReuse();
+    // Where an element starts (#414): the ward's start, or, for one that comes after the last left the
+    // page, a fresh one, 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.
+    const beginOf = (element) => {
+        if (Predicate.isUndefined(entersFresh))
+            return start;
+        if (Bool.not(entersFresh(element)))
+            return start;
+        const fresh = startOf(untrack(cfg), parent, false, untrack);
+        snapshot.values = { ...fresh.initialValues };
+        snapshot.velocities = {};
+        snapshot.drawnAt = {};
+        if (Predicate.isNotUndefined(restartStyle))
+            restartStyle(fresh);
+        return fresh;
+    };
+    // The config and the user's style, as the spine reads them: untracked.
+    const configNow = () => untrack(cfg);
+    const styleNow = UndefinedOr.map(styleOf, (of) => () => untrack(of));
+    // Inside a child `mode="wait"` holds off the page (#277, ADR-0048), everything starts once the child
+    // is on it: `shown` ticks then, and the effect below runs again. Only under a presence: with none,
+    // nothing is made or called here (a check per element at mount cost the first Retarget ~9% cold).
+    let mountedOn = el;
+    let shown;
+    if (Predicate.isNotUndefined(presence)) {
+        const [ticked, tick] = createSignal(undefined, { equals: false });
+        shown = () => tick();
+        mountedOn = () => {
+            ticked();
+            return el();
+        };
+    }
+    // Start everything once the element mounts. createEffect(on(el, ...)) re-runs
+    // only when the element identity changes; the spine inner-effect lives under
+    // this owner so onCleanup teardown (gate.unregister + fiber interrupts) fires
+    // on unmount.
+    createEffect(on(mountedOn, (element) => {
+        if (Predicate.isUndefined(element))
+            return;
+        // Held off the page: nothing starts until it's on it.
+        if (heldBack(presence, element, shown))
+            return;
+        // Its start: the ward's, or a fresh one when it comes after the last element left (#414).
+        const begin = beginOf(element);
+        // Register the element with the caller-supplied sink (ADR-0006): each
+        // flushed frame's Patch is committed onto it (ADR-0034). An element with `onUpdate` at mount
+        // is told each committed frame (#233); any other never joins the gate's tells. While
+        // hydrating, its Appear animation is found here, taken over by its first Retarget that
+        // starts, and removed in its first commit (#48, ADR-0044 decision 6).
+        const handoff = Bool.match(hydrating === true, { onTrue: () => Option.getOrUndefined(handoffOf(element)), onFalse: constUndefined });
+        // Its Transform template (#443), drawn with its first write: the one at mount, then each other
+        // one its config gives.
+        const templateAtMount = untrack(cfg).transformTemplate;
+        let template = templateAtMount;
+        const registered = registeredValuesOf(templateAtMount);
+        const unregister = gate.register(id, releasingAppear(withOnUpdate(makeSink(element), untrack(cfg).onUpdate, configNow), handoff, element), registered);
+        onCleanup(unregister);
+        // A surface whose props don't carry a drag element's defaults (ADR-0019 *Amendment
+        // (Reorder)*): set each one the element's inline style doesn't already, and the
+        // attribute unless it has one, once at mount.
+        if (defaultsInProps !== true) {
+            const base = internal.baseStyle;
+            if (Predicate.isNotUndefined(base)) {
+                // The base style goes under the user's: a key the element's own inline style
+                // sets at mount is the user's, and is never written.
+                const own = new Set(element.style);
+                const write = (style) => {
+                    if (Predicate.isUndefined(style))
+                        return;
+                    Arr.forEach(Rec.keys(style), (key) => {
+                        if (Bool.not(own.has(key)))
+                            element.style.setProperty(key, String(style[key]));
+                    });
+                };
+                // Written now, then on each change. Now, not in the effect's first run: that runs
+                // just before this element's spine effect, whose first Retarget may read the
+                // element's Own values (ADR-0022), so a list of items would alternate a write and a
+                // read per item and force a style recalculation each (#47's mount measurement).
+                write(untrack(base));
+                createEffect(on(base, (style) => write(style), { defer: true }));
+            }
+            UndefinedOr.map(dragDefaultsOf(untrack(cfg), internal), (defaults) => applyDragDefaults(element, defaults));
+        }
+        // Base values (ADR-0022): a key with no value starts from its `style` value, else its Own
+        // value, read from the element once per key, at first need (D3).
+        const links = startLinksOf(element, styleNow, live);
+        // --- Presence registration (ADR-0007 exit) -------------------------------
+        // Under an <AnimatePresence>, publish a live record so the PARENT can drive
+        // this element's exit after Solid disposes its owner. `snapshot.current` is
+        // updated to the latest emitted value-map EACH FRAME (so the exit departs
+        // continuously from where the element rests); what its exit resolves from (#277: its `exit`,
+        // `variants`, `custom` and transition) is kept current while it's alive, and resolved as it
+        // leaves. The child does NOT call the disposer on its own
+        // onCleanup — <AnimatePresence> removes the registration after the exit settles.
+        let presenceRec;
+        // 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.
+        let taken;
+        if (Predicate.isNotUndefined(presence)) {
+            const exitConfig = { current: exitConfigOf(untrack(cfg), parent) };
+            const rec = presenceRecordOf(element, begin, (custom, inherited) => exitTargetOf(exitConfig.current, custom, snapshot, inherited), links, presenceTreeOf(untrack(cfg)), snapshot, reducedMotion, skipAnimations);
+            presenceRec = rec;
+            presence.register(rec);
+            taken = presenceSeedOf(presence, element);
+            createEffect(() => {
+                exitConfig.current = exitConfigOf(cfg(), parent);
+            });
+        }
+        const recordFrame = recordFrameOf(presenceRec);
+        // Every element's values, by element, for the projection (ADR-0012 *Amendment (#137)*): a twin's
+        // flight follows the translate and scale Wardic animates on its ancestors each frame.
+        // None while no section has `layout`: there's no flight to follow them (#511).
+        UndefinedOr.map(builtProjection(), (projection) => onCleanup(projection.registerValues(element, () => snapshot.values)));
+        // 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, and nothing for its cleanup to run.
+        if (Predicate.isNotUndefined(templateAtMount)) {
+            recordFrame(registered);
+            onCleanup(followTemplate(templateAtMount, () => cfg().transformTemplate, reactivity.watch, (next) => {
+                template = next;
+                const values = { ...snapshot.values, [DomRenderer.TEMPLATE_KEY]: next };
+                gate.write(id, values);
+                recordFrame({ [DomRenderer.TEMPLATE_KEY]: next });
+            }));
+        }
+        // --- Layout / shared-element / scroll projection (ADR-0009/0010/0012) ---
+        // ONE projection node per element: `layout`, `layoutId`, and/or `layoutScroll`
+        // feed the SAME node (no double registration). `layout` is a static enable
+        // flag; `layoutId` (static, read once) enrols the node in the engine's
+        // lead/follow stack (crossfade) and lets a twin disposed in the same task seed
+        // it (a Switch, engine-side — ADR-0010 *Amendment (#13)*); `layoutScroll`
+        // (static) marks it a scroll container whose scroll is folded out of its
+        // descendants' boxes. All static,
+        // read once — the reserved props layoutRoot/layoutAnchor remain typed-but-no-op
+        // (P4).
+        const c0 = untrack(cfg);
+        // layout / layoutId / layoutScroll / layoutRoot each warrant a node; layoutAnchor
+        // alone does not (it only tunes a node that already projects), but is forwarded.
+        let layoutHandle;
+        // What every release runs on, the layout node's Release offset and the drag track's (ADR-0016, *Amendment (#140)*).
+        const dragTransition = dragTransitionOf(c0.dragElastic, c0.dragTransition);
+        // 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.
+        if (DEV && wantsLayoutNode(c0) && Predicate.isUndefined(layoutProjection) && Bool.not(untrack(features.pending))) {
+            useFeatureRegistry().warnOnce("layout", missingMessage("layout", LAYOUT_PROPS, "@wardic/solid"));
+        }
+        // `layout` on its way (#582): its node is made as it arrives, under this owner, as Motion's is,
+        // and measures from then on; nothing before it is replayed. A load that brings none gets
+        // development's word then.
+        let lateLayout;
+        if (wantsLayoutNode(c0)) {
+            // What its node is made with, copied into this block: the closures here hold only these, so an
+            // element with no layout prop keeps none of them (#551's lesson).
+            const ward = {
+                id,
+                element,
+                config: cfg,
+                parent,
+                snapshot,
+                dragTransition,
+                raiseWhileDragged: internal.raiseWhileDragged === true,
+                layoutGroup,
+                reducedMotion,
+                skipAnimations,
+                heldTransform: heldTransformFor(snapshot, templateAtMount, () => template),
+            };
+            const onLayoutHandle = internal.onLayoutHandle;
+            // Its node on `projection`, handed to a `<Reorder>` item's group; `takenNow`, where a child that
+            // takes over from a leaver starts, at its mount only (#286).
+            const layoutNodeOn = (projection, takenNow) => {
+                const handle = projectionNodeOf(projection, layoutOptionsOf({ ...ward, taken: takenNow }));
+                if (Predicate.isNotUndefined(onLayoutHandle))
+                    onLayoutHandle(handle);
+                return handle;
+            };
+            if (Predicate.isNotUndefined(layoutProjection))
+                layoutHandle = layoutNodeOn(layoutProjection, taken);
+            if (Predicate.isUndefined(layoutProjection) && untrack(features.pending)) {
+                const owner = getOwner();
+                const registry = useFeatureRegistry();
+                const section = features;
+                const later = {
+                    handle: undefined,
+                    arrive: () => {
+                        if (Predicate.isNotUndefined(later.handle))
+                            return;
+                        UndefinedOr.match(projectionIn(section.services()), {
+                            onDefined: (arrived) => {
+                                later.handle = runWithOwner(owner, () => untrack(() => layoutNodeOn(arrived, undefined)));
+                            },
+                            onUndefined: () => {
+                                if (DEV && Bool.not(section.pending()))
+                                    registry.warnOnce("layout", missingMessage("layout", LAYOUT_PROPS, "@wardic/solid"));
+                            },
+                        });
+                    },
+                };
+                lateLayout = later;
+                createComputed(later.arrive);
+            }
+        }
+        // The app's gesture callbacks (#273, ADR-0047), each read from the config when it's called: made
+        // at the first gesture that needs them, as most elements have none.
+        let gestures;
+        const gesturesOf = () => {
+            if (Predicate.isUndefined(gestures))
+                gestures = gestureCallbacksOf(runtime, id, () => untrack(cfg));
+            return gestures;
+        };
+        // --- Drag track (ADR-0004) ----------------------------------------------
+        // When cfg().drag is truthy, run the binding-orchestrated drag track: the
+        // pointer DIRECT-SETS x/y (1:1, not sprung) while the spring keeps driving
+        // every other key + whileDrag. `dragging` is the ONLY reactive piece (it
+        // gates the whileDrag override + the translate-key strip); the drag
+        // CONFIG is static — read ONCE here (untrack), since drag config is a
+        // document. The track's single fiber is scoped to this owner's onCleanup.
+        const dragCfg = dragAxisOf(untrack(cfg), internal);
+        const [dragging, setDragging] = createSignal(false);
+        // Its hold on `x`/`y`, for the spine's Retargets (#340).
+        let dragTrack;
+        // Its track's holder while `drag` is on its way (#551): the spine reads the track there, and
+        // whether it drives the layout node (#582).
+        let late;
+        // 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 = serviceIn(untrack(features.services), DragGesture);
+        if (DEV && Predicate.isNotUndefined(dragCfg) && Predicate.isUndefined(dragGesture) && Bool.not(untrack(features.pending))) {
+            useFeatureRegistry().warnOnce("drag", missingMessage("drag", GESTURE_WORDS.drag, "@wardic/solid"));
+        }
+        if (Predicate.isNotUndefined(dragCfg)) {
+            // What the track is made with, copied into this block: a closure here holds only these, so an
+            // element that never drags keeps none of them (#551).
+            const axis = dragCfg;
+            const transition = dragTransition;
+            const setDrag = draggingWithWillChange(live, setDragging);
+            const nodeAtMount = layoutHandle;
+            const nodeLater = lateLayout;
+            // It drives the layout node the element has as it's made, at mount or as `drag` arrives: a
+            // node made later leaves it moving `x`/`y` (#582).
+            const trackWith = (dragGesture) => {
+                const projection = layoutNodeOf(nodeAtMount, nodeLater);
+                const c0d = untrack(cfg);
+                // Motion's `dragConstraints` (#273): a box of numbers, or a container measured against the element.
+                const constraints = dragGesture.constraintsOf(c0d.dragConstraints, element, () => untrack(cfg).onMeasureDragConstraints, pagePoint);
+                const trackConfig = {
+                    axis,
+                    constraints: constraints.constraints,
+                    elastic: c0d.dragElastic,
+                    momentum: c0d.dragMomentum,
+                    snapToOrigin: c0d.dragSnapToOrigin,
+                    propagation: c0d.dragPropagation,
+                    directionLock: c0d.dragDirectionLock,
+                    transition,
+                    listen: c0d.dragListener,
+                };
+                return runDragTrackWith(dragGesture.drive, {
+                    runtime,
+                    gate,
+                    id,
+                    element,
+                    snapshot,
+                    recordFrame,
+                    // A drag's start turns its `style`'s will-change value on (#443).
+                    setDragging: setDrag,
+                    mapPoint: pagePoint,
+                    config: trackConfig,
+                    skipAnimations,
+                    container: constraints.container,
+                    controls: c0d.dragControls,
+                    // ADR-0016: a drag on a LAYOUT node feeds the projection, not its own x/y
+                    // (drawn on top, #363), so the dragged item follows the pointer and FLIPs to
+                    // its slot on release. Free drag (no handle) is unchanged.
+                    ...UndefinedOr.match(projection, { onUndefined: () => ({}), onDefined: (node) => ({ projection: node }) }),
+                    ...UndefinedOr.match(internal.dragAxis, { onUndefined: () => ({}), onDefined: (axisAt) => ({ axisAt }) }),
+                    // Its samples to a `<Reorder>` item's group, and to the app's drag callbacks (#273).
+                    onSample: UndefinedOr.match(internal.onDragSample, {
+                        onUndefined: () => gesturesOf().dragged,
+                        onDefined: (onSample) => {
+                            const { dragged } = gesturesOf();
+                            return (sample) => {
+                                onSample(sample);
+                                dragged(sample);
+                            };
+                        },
+                    }),
+                    onReleaseEnd: gesturesOf().released,
+                });
+            };
+            if (Predicate.isNotUndefined(dragGesture))
+                dragTrack = trackWith(dragGesture);
+            // `drag` on its way (#551): the track starts as it arrives, from then on, as a gesture's
+            // recognizer does, under this owner; nothing before it is replayed. A load that brings none
+            // gets development's word then.
+            if (Predicate.isUndefined(dragGesture) && untrack(features.pending)) {
+                const held = { track: undefined, projected: false };
+                late = held;
+                const owner = getOwner();
+                const registry = useFeatureRegistry();
+                const section = features;
+                createComputed(() => {
+                    if (Predicate.isNotUndefined(held.track))
+                        return;
+                    UndefinedOr.match(serviceIn(section.services(), DragGesture), {
+                        onDefined: (arrived) => {
+                            // A `layout` from the same load makes its node first, so the track drives it (#582).
+                            if (Predicate.isNotUndefined(nodeLater))
+                                nodeLater.arrive();
+                            held.projected = Predicate.isNotUndefined(layoutNodeOf(nodeAtMount, nodeLater));
+                            held.track = runWithOwner(owner, () => untrack(() => trackWith(arrived)));
+                        },
+                        onUndefined: () => {
+                            if (DEV && Bool.not(section.pending()))
+                                registry.warnOnce("drag", missingMessage("drag", GESTURE_WORDS.drag, "@wardic/solid"));
+                        },
+                    });
+                });
+            }
+        }
+        // Recognizers over the live element, each started the first time its config wants it, as
+        // Motion's features are (#87, ADR-0040; #273): `whileHover` or a hover callback, `whileTap` or a
+        // tap callback, a pan callback. Each hover and press transition sets its layer; each event is
+        // told to the app's callbacks, at the event. Their fibers are scoped to this owner's onCleanup
+        // (runScoped). Until started, a layer reads false.
+        // Each through its section's Feature (#511), read with the config, so one that arrives lazily
+        // starts what the config wants of it from then on.
+        const gestureOf = (key) => UndefinedOr.getOrThrow(serviceIn(untrack(features.services), key));
+        // An element that can never want one watches for none (#525): no computation an element.
+        let started = NEVER_STARTED;
+        if (internal.gestureless !== true)
+            started = createWhenWanted(() => ({ config: cfg(), services: features.services() }), WANTS, {
+                hover: () => watchToSignal(({ on, onDefect }) => gestureOf(HoverGesture).watch(element, {
+                    on: (transition) => {
+                        gesturesOf().hovered(transition);
+                        on(transition.active);
+                    },
+                    onDefect,
+                }), false),
+                press: () => watchToSignal(({ on, onDefect }) => gestureOf(PressGesture).watch(element, {
+                    on: (press) => {
+                        gesturesOf().pressed(press, element);
+                        on(press.phase === "start");
+                    },
+                    onDefect,
+                }, internal.keysTaken === true, () => tapPropagates(untrack(cfg).propagate)), false),
+                // In view as its `viewport` says, read when it starts; each transition told to the viewport callbacks.
+                inView: () => watchToSignal(({ on, onDefect }) => gestureOf(InViewGesture).watch(element, inViewOptionsOf(untrack(cfg).viewport), {
+                    on: (transition) => {
+                        gesturesOf().viewed(transition);
+                        on(transition.active);
+                    },
+                    onDefect,
+                }), false),
+                // Focused as the browser shows it (`:focus-visible`, Motion's `whileFocus`).
+                focus: () => watchToSignal((handlers) => gestureOf(FocusGesture).watch(element, { visible: true }, handlers), false),
+                pan: () => runWatch(runtime, (onDefect) => gestureOf(PanGesture).watch(element, { on: (sample) => gesturesOf().panned(sample), onDefect }, { mapPoint: pointMapOptionOf(pagePoint) })),
+            });
+        if (DEV && internal.complete !== true && internal.gestureless !== true)
+            warnMissingGestures(useFeatureRegistry(), features, cfg);
+        // Its gesture states: the started recognizers, one tracked read, then each started one's state.
+        // A keyboard lift turns `whileDrag` on, as a drag does (ADR-0037).
+        const lifted = internal.lifted;
+        const active = () => {
+            const held = dragging();
+            const layers = started();
+            return {
+                inView: stateOf(layers.inView),
+                focused: stateOf(layers.focus),
+                hovered: stateOf(layers.hover),
+                pressed: stateOf(layers.press),
+                dragged: Bool.or(held, Predicate.isNotUndefined(lifted) && lifted()),
+                dragging: held,
+            };
+        };
+        // The Override stack (`resolutionOf`), compared by value, as Solid 2's (#470): a reactive config
+        // change, a recognizer's flip or the drag's recomputes it, and only one that resolves a new
+        // target drives a Retarget. A `transition`, a callback or an option alone tells nothing, as
+        // Motion's doesn't.
+        const target = createMemo(() => resolutionOf(cfg(), parent, begin.initialLink, active(), snapshot, ownChange()), undefined, { equals: sameResolution });
+        // 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.
+        if (DEV && internal.complete !== true)
+            warnUnreadColors(useFeatureRegistry(), features, () => target().resolved);
+        // Its gesture states, for the names its variant node hands down (#291): read from the gestures
+        // themselves, as a gesture whose layer resolves nothing new leaves the target as it was.
+        if (Predicate.isNotUndefined(bindGestures))
+            bindGestures(active);
+        // The spine (`spine.ts`): on each target change, end the running legs and reseed a fresh
+        // primitive from the Snapshot (velocity-preserving), into the gate.
+        const spineOptions = {
+            runtime,
+            gate,
+            id,
+            element,
+            tag,
+            config: configNow,
+            parent,
+            canStart,
+            extraDelay,
+            byName,
+            onFrame,
+            reducedMotion,
+            skipAnimations,
+            positionalKeys,
+            defaultTransition,
+            start: begin,
+            snapshot,
+            reuse,
+            links,
+            styleNow,
+            live,
+            presence: presenceRec,
+            projected: Predicate.isNotUndefined(layoutHandle),
+            dragAxis: dragCfg,
+            drag: dragTrack,
+            handoff,
+            // Motion's onAnimationStart / onAnimationComplete (#257).
+            animation: animationCallbacks(runtime, id),
+        };
+        // A track that starts once `drag` arrives (#551) is read 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.
+        if (Predicate.isNotUndefined(late)) {
+            const held = late;
+            Object.defineProperty(spineOptions, "drag", { get: () => held.track });
+            // Whether that track drives the layout node (#582): until it starts, whether the element has one.
+            const nodeAtMount = layoutHandle;
+            const nodeLater = lateLayout;
+            Object.defineProperty(spineOptions, "projected", {
+                get: () => UndefinedOr.match(held.track, { onUndefined: () => Predicate.isNotUndefined(layoutNodeOf(nodeAtMount, nodeLater)), onDefined: () => held.projected }),
+            });
+        }
+        const spine = makeElementSpine(spineOptions);
+        onCleanup(spine.dispose);
+        // Its Imperative animations (#433) go through its spine while it's mounted.
+        onCleanup(registerAnimatable(element, spine));
+        // Its Animation controls (#433) reach it while it's mounted.
+        UndefinedOr.map(controls, (c) => onCleanup(subscribe(c.controls, controlledElement(c.set, { custom: () => untrack(cfg).custom, snapshot }, spine.stop))));
+        // A child back under its key starts where its leaver is drawn (#286), before its first Retarget.
+        if (Predicate.isNotUndefined(taken))
+            spine.seed(taken);
+        // The spine effect depends on BOTH `target` and `canStart` (ADR-0007 `when`):
+        // Solid's `on` runs its callback under `untrack`, so the gate accessor MUST
+        // be an explicit dependency for a gate flip (false -> true) to RE-RUN this
+        // effect and release the held Retarget. `target` already depends on cfg() +
+        // parent.variant(); adding canStart() releases the gate without restarting on
+        // every frame (canStart only changes on settle-signal flips, not per frame).
+        createEffect(on(() => {
+            const t = target();
+            // Track the gate so its flips re-run this effect (value unused).
+            if (Predicate.isNotUndefined(canStart))
+                canStart();
+            return t;
+        }, spine.retarget));
+        // Live values in `style` (#130, ADR-0043): followed from the first routed key on.
+        spine.follow({ resolved: () => untrack(target).resolved, dragging: () => untrack(dragging) });
+    }));
+}
+/**
+ * Says, once per provider and gesture, that the element wants a gesture its section has no Feature for
+ * (#511, ADR-0067 decision 7): outside a lazy load. Development only (its caller's `DEV`).
+ */
+const warnMissingGestures = (registry, features, config) => {
+    createEffect(() => {
+        const c = config();
+        const services = features.services();
+        if (features.pending())
+            return;
+        Arr.forEach(GESTURE_FEATURES, ([name, wants, key]) => {
+            if (wants(c) && Bool.not(hasService(services, key)))
+                registry.warnOnce(name, missingMessage(name, GESTURE_WORDS[name], "@wardic/solid"));
+        });
+    });
+};
+/**
+ * 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(() => {
+        const unread = unreadColorIn(values());
+        if (Predicate.isUndefined(unread) || features.pending())
+            return;
+        registry.warnOnce("colors", missingMessage("colors", `The colour \`${unread}\``, "@wardic/solid"));
+    });
+};
+/**
+ * {@link createWard} with a `<Reorder>` item's additions (internal, ADR-0020; not
+ * exported from the package).
+ */
+export function createWardWith(config, internal = NO_INTERNALS) {
+    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();
+    // Owner-scoped, SSR/hydration-stable unique id for this element's gate entry
+    // (Solid's createUniqueId, not a module counter — see ADR note / no global state).
+    const id = createUniqueId();
+    // Normalize to an Accessor<WardConfig>. A WardConfig is always an object,
+    // so `typeof config === "function"` is a safe discriminant for the accessor. With Animation
+    // controls for its `animate` (#433), each change they make is its entry.
+    const { cfg, controls } = controlledOf(accessorOf(config));
+    // Its place in variant orchestration (ADR-0007, #50): what it hands its children, and,
+    // as a Variant child, the ancestor it inherits from and joins (its stagger slot, its
+    // `when`). Read at hook-call time (component body owner), for this instance's lifetime.
+    const node = createVariantNode(cfg, useVariantContext(), UndefinedOr.map(controls, (c) => c.change));
+    // The Renderer's PURE project (ADR-0003: synchronous, no engine), read once by the provider (#618, M1).
+    const { project } = useWardicRenderer();
+    // Starting style: resolved purely from the config read EXACTLY ONCE (untrack — no
+    // reactive dependency, must not re-seed after mount), with the inherited `initial`
+    // name for a Variant child that has none (#50). It's the `style` until the first
+    // commit, so pre-mount render carries the initial style (no flash).
+    const initialConfig = untrack(cfg);
+    const presence = usePresenceContext();
+    const initialValues = startingValuesOf(initialConfig, node.inherited, presenceBlocksInitial(presence), untrack);
+    // 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(initialValues, layoutNode, initialConfig.transformTemplate);
+    // The Starting style: the projected SSR initial, carried by `style` until the gate's
+    // first commit (ADR-0021 decision 6, ADR-0034). An svg-inner tag's attribute keys are
+    // split off and set once as attributes, as the server renders them (ADR-0021); the
+    // gate's commits take over at mount. While hydrating, it's what the server rendered, the
+    // DOM's project (the Hydration hold, ADR-0021 decision 2): the Environment's Renderer
+    // takes over at the first frame, and a different Starting style from it is noted once
+    // (cold path).
+    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 routed `style` keys (#130, ADR-0043): its Live values and transform keys, which the gate
+    // writes from mount, and the Starting style carries until then, under `initial`'s.
+    const live = createLiveStyle({ registry: registryOf(runtime), onDroppedTransform: () => warnDroppedTransform(runtime, id), reactivity });
+    const projectStarting = Bool.match(hydrating, { onTrue: () => DomRenderer.project, onFalse: () => project });
+    const startingWith = (routed) => Svg.splitPatchForTag(internal.tag, projectStarting(drawnAtRest({ ...routed, ...initialValues }, layoutNode, initialConfig.transformTemplate))).style;
+    // A drag element's defaults (ADR-0019 *Amendment (Reorder)*), under the user's
+    // style: `drag` is static, so they're chosen once.
+    const dragDefaults = dragDefaultsOf(untrack(cfg), internal);
+    const baseStyle = internal.baseStyle;
+    // The props `ward(userProps)` was last called with: their `style` is this element's style
+    // link (ADR-0022), read untracked at need (the live getter on `wardic.*`), and its
+    // fallback once the gate commits (ADR-0034).
+    let lastUserProps = NO_USER_PROPS;
+    const elementStyle = createElementStyle({
+        userStyle: () => lastUserProps.style,
+        starting: seed.style,
+        startingWith,
+        live,
+        defaults: dragDefaults,
+        base: baseStyle,
+        reactivity,
+    });
+    // The element, available only after ref-mount. The spine is gated on it. Under a presence, it's
+    // told as it's made (#286): its `key`, and whether it's a twin. With none, nothing is made here.
+    const [el, setEl] = createSignal();
+    // The last element its ref was given, and one given after that one left the page, which enters
+    // fresh (#414). Read as the ref is called, before Solid inserts the element: one replacing the last
+    // in the same update finds it still on the page, and carries on.
+    let refd;
+    let fresh;
+    const refElement = (element) => {
+        if (Predicate.isNotUndefined(refd) && refd !== element && Bool.not(refd.isConnected))
+            fresh = element;
+        refd = element;
+        setEl(element);
+    };
+    const setElement = madeWith(presence, refElement, initialConfig);
+    // Run the shared spine: the gate commits each flushed Patch onto this element
+    // (ADR-0006, ADR-0034), and the sink's hooks switch its `style`. Its variant node
+    // wires the orchestration (ADR-0007, #50): the context it inherits names from, its
+    // stagger delay as a Variant child, the `when` gates on its start, and its settle report.
+    runSpine({
+        runtime,
+        gate,
+        id,
+        el,
+        cfg,
+        controls,
+        parent: node.inherited,
+        extraDelay: node.extraDelay,
+        byName: node.names,
+        canStart: node.canStart,
+        bindGestures: node.bindGestures,
+        onFrame: node.onFrame,
+        internal,
+        styleOf: () => lastUserProps.style,
+        live,
+        // The gate commits onto the element (an svg-inner element's attribute keys as
+        // attributes, ADR-0014); the hooks switch the spread's `style` (ADR-0034).
+        makeSink: (element) => ({ target: element, ...elementStyle.hooks }),
+        // The spread's `style` and attributes carry the drag defaults and the base style, unless
+        // they reach a wrapped component, which may not pass them on (#253).
+        defaultsInProps: internal.defaultsOnElement !== true,
+        hydrating,
+        tag: internal.tag,
+        entersFresh: (element) => element === fresh,
+        restartStyle: (start) => elementStyle.restart(Svg.splitPatchForTag(internal.tag, project(drawnAtRest(start.initialValues, layoutNode, untrack(cfg).transformTemplate))).style),
+        features,
+    });
+    // `<ward.Provider>` publishes what this instance hands its children (#50): its own
+    // variant context, its parent's passed through, or none.
+    const Provider = (props) => (<WardicVariantContext.Provider value={node.provided}>{props.children}</WardicVariantContext.Provider>);
+    // 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, read when the accessor is (the user's style as last given, a
+    // reactive `style` prop tracked).
+    const restingValueOf = (key) => restingOf(key, initialValues, lastUserProps.style, (raw) => live.read(raw));
+    // One accessor a key, made on first ask: most elements ask none.
+    let values;
+    const value = (key) => {
+        if (Predicate.isUndefined(values))
+            values = new Map();
+        const known = values.get(key);
+        if (Predicate.isNotUndefined(known))
+            return known;
+        const shown = fromAtom(gate.valueOf(id, key));
+        const accessor = () => UndefinedOr.match(shown(), { onUndefined: () => restingValueOf(key), onDefined: identity });
+        values.set(key, accessor);
+        return accessor;
+    };
+    // The callable + its `.Provider` property (ADR-0007). Object.assign keeps the
+    // callable's merge API (ward() / ward({ ref, style })) intact while attaching
+    // Provider as a property, and the cast aligns it with the `Ward` type.
+    const ward = Object.assign((userProps = NO_USER_PROPS) => {
+        lastUserProps = userProps;
+        return {
+            // Merge the user's ref (if any) with ward's internal element setter so BOTH
+            // are invoked with the live element on mount (Option A).
+            ref: mergeRefs(userProps.ref, setElement),
+            // Getter so spreading {...ward()} stays reactive (Solid tracks the access): the
+            // Starting style over the user's until the first commit, then the user's without the
+            // keys the gate holds (ADR-0034). It never changes per frame.
+            get style() {
+                return elementStyle.style(userProps.style);
+            },
+            ...seed.attrs,
+            ...UndefinedOr.match(dragDefaults, { onUndefined: () => ({}), onDefined: () => Style.DRAG_DEFAULT_ATTRIBUTES }),
+        };
+    }, { Provider, value: value, atom: (key) => gate.valueOf(id, key) });
+    return ward;
+}
+/** A server's output Atom: nothing is written there, so it stays `undefined`. */
+const NO_OUTPUT = Atom.make(undefined);
+/**
+ * {@link createWardWith} during a server render (ADR-0021, decisions 1 and 4): the element's
+ * Starting style and static attributes, computed purely, and nothing else: no runtime, no
+ * spine, no signals. Hydration keys must land where the client's render puts them, so it
+ * makes the client's one `createUniqueId` call in the same place, and its `.Provider`
+ * renders the same component nesting, with a variant context that carries the names and
+ * transitions but no orchestration.
+ */
+const serverWard = (config, internal = NO_INTERNALS) => {
+    // The client's gate id: keeps every later hydration key in step.
+    createUniqueId();
+    // Animation controls (#433) set nothing on a server: no entry yet, and controlled, as on the client.
+    const c = uncontrolledOf(withConfigTransition(accessorOf(config)(), useWardicConfig()));
+    // The same names the client hands down, read once, with orchestration that does nothing
+    // (#50); a Variant child's Starting style starts from its ancestor's `initial` name.
+    const node = serverVariantNode(c, useVariantContext());
+    const layoutNode = isLayoutNode(c);
+    const seed = Style.starting(internal.tag, drawnAtRest(startingValuesOf(c, node.inherited, presenceBlocksInitial(usePresenceContext()), untrack), layoutNode, c.transformTemplate));
+    const dragDefaults = dragDefaultsOf(c, internal);
+    const initialValues = startingValuesOf(c, node.inherited, presenceBlocksInitial(usePresenceContext()), untrack);
+    // 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 = serverAppearOf(c, internal.tag, initialValues, node, startsQuiet(c, node.inherited, presenceBlocksInitial(usePresenceContext()), untrack));
+    const Provider = (props) => (<WardicVariantContext.Provider value={appear.provided}>{props.children}</WardicVariantContext.Provider>);
+    const read = (value) => readServerStyle(value);
+    let lastStyle;
+    const ward = Object.assign((userProps = NO_USER_PROPS) => {
+        lastStyle = userProps.style;
+        // Its routed keys' values join the Starting style, under `initial`'s (#130).
+        const parts = split(userProps.style);
+        // A style with its own `animation` keeps it: the element's Appear animation would take its place.
+        const ownAnimation = setsAnimation(parts.css);
+        if (ownAnimation)
+            appear.veto("its own style sets an animation");
+        return {
+            ref: UndefinedOr.match(userProps.ref, { onUndefined: () => noRef, onDefined: identity }),
+            style: 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(Bool.match(ownAnimation, { onTrue: constUndefined, onFalse: () => appear.style }))),
+            ...seed.attrs,
+            ...UndefinedOr.match(dragDefaults, { onUndefined: () => ({}), onDefined: () => Style.DRAG_DEFAULT_ATTRIBUTES }),
+        };
+    }, {
+        Provider,
+        value: ((key) => () => restingOf(key, initialValues, lastStyle, read)),
+        atom: () => NO_OUTPUT,
+        [SERVER_APPEAR]: appear,
+    });
+    return ward;
+};
+/**
+ * A server element's subtree, rendered inside its Appear entry (#245): a late chunk's root puts the
+ * chunk's `<style>` after itself, server text its client doesn't render (the provider moves it into
+ * the head before the chunk hydrates, `Appear.adoptChunks`). Per element on a server: an element in
+ * the shell, most, renders as it is, with guards and no allocation.
+ */
+export const renderServerElement = (appear, render) => {
+    if (Predicate.isUndefined(appear) || Bool.not(appear.late) || Predicate.isUndefined(appear.state))
+        return render();
+    const state = appear.state;
+    const element = state.within(true, render);
+    if (Bool.not(appear.chunkRoot))
+        return element;
+    return [element, () => ({ t: state.chunk() })];
+};
+/** Where a server ward keeps its Appear entry, for the `wardic.<tag>` that renders it (#245). Internal. */
+const SERVER_APPEAR = Symbol("wardic.serverAppear");
+/** A server ward's Appear entry (#245); `undefined` for a client one. Internal. */
+export const serverAppearOfWard = (ward) => ward[SERVER_APPEAR];
+/** {@link appearEntryOf} with this provider's Appear state (#48, ADR-0044) and its nearest `WardicConfig`'s reduced motion (#434). */
+export const serverAppearOf = (c, tag, initialValues, node, quiet) => appearEntryOf(useWardicAppear(), c, tag, initialValues, node, quiet, settingOf(useWardicConfig()), useWardicSkipAnimations()());
+/** 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);
+/** A server render's `ref`: Solid never calls it there. */
+const noRef = () => { };
+//# sourceMappingURL=create-ward.jsx.map